6 минут чтения

Чтобы сделать таблицу доступной для пользователей экранных дикторов, используйте семантическую разметку: обозначьте заголовки через <th>, данные - через <td>, а таблице задайте понятную подпись. Для сложных таблиц явно свяжите заголовки с ячейками. Затем проверьте навигацию с клавиатуры и озвучивание: доступность сайта для скринридеров зависит от того, сохраняется ли смысл таблицы при последовательном чтении.

Что делает HTML-таблицу понятной экранному диктору

Таблица используется для связанных данных, а не для визуального расположения элементов страницы.
Заголовочные ячейки размечены тегом <th>, обычные - <td>.
У таблицы есть краткая подпись, описывающая её содержание.
В сложной структуре заголовки явно связаны с соответствующими ячейками данных.
На узком экране данные остаются связаны с заголовками, а таблицу можно прокручивать без потери смысла.
Таблица проверена с клавиатуры и экранным диктором.

Сначала проверьте, нужна ли здесь таблица

Таблица подходит, когда нужно сопоставить данные по строкам и столбцам: например, тарифы, расписание или характеристики товаров. Для обычного текста, последовательности шагов или набора карточек используйте соответственно абзацы, список или другие подходящие элементы - таблица усложнит чтение и навигацию.

В разработке доступных сайтов сначала определите отношения между данными: что является заголовком строки, что - заголовком столбца и какие значения с ними связаны. Если такие отношения нельзя кратко объяснить, пересмотрите структуру до написания разметки.

Разметьте заголовки строк и столбцов

Для базовой таблицы обычно достаточно HTML-элементов <table>, <caption>, <thead>, <tbody>, <th> и <td>. Дополнительные библиотеки не нужны. При создании сайтов с учетом доступности используйте семантические элементы по назначению, а не стилизуйте обычные ячейки так, чтобы они лишь выглядели как заголовки.

<table>
  <caption>Время работы филиалов</caption>
  <thead>
    <tr>
      <th scope="col">Филиал</th>
      <th scope="col">Будни</th>
      <th scope="col">Выходные</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Центральный</th>
      <td>09:00-18:00</td>
      <td>10:00-16:00</td>
    </tr>
  </tbody>
</table>

Значение scope="col" обозначает заголовок столбца, а scope="row" - заголовок строки. В простой таблице это помогает браузеру и экранному диктору передавать связь между заголовками и данными.

Свяжите ячейки с заголовками в сложной структуре

Если заголовки охватывают несколько уровней или ячейки объединены, одного визуального оформления недостаточно. Пройдите шаги и добавьте явные связи там, где структуру нельзя корректно описать обычным scope.

Определите заголовки для каждой ячейки данных.

Составьте карту: какие заголовки строки и столбца объясняют значение каждой ячейки. Если для данных нужны несколько заголовков, зафиксируйте их названия заранее.
Назначьте заголовкам уникальные идентификаторы.

Добавьте атрибут id каждой заголовочной ячейке, на которую будут ссылаться данные.

Перечислите связи в атрибуте headers.

Укажите в headers идентификаторы всех заголовков, относящихся к ячейке. Значения разделяются пробелами.

<table>
  <caption>Продажи по регионам и кварталам</caption>
  <thead>
    <tr>
      <th id="region" rowspan="2">Регион</th>
      <th id="year" colspan="2">2026 год</th>
    </tr>
    <tr>
      <th id="q1">Первый квартал</th>
      <th id="q2">Второй квартал</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north" scope="row">Север</th>
      <td headers="north year q1">120</td>
      <td headers="north year q2">135</td>
    </tr>
  </tbody>
</table>

Повторите проверку связей для всех данных.

Убедитесь, что каждый идентификатор из headers существует и относится к нужной ячейке. Не добавляйте сложные связи без необходимости: для простой прямоугольной таблицы обычно достаточно scope.

Быстрый режим

Оставьте таблицу только для данных, которые действительно нужно сравнивать по строкам и столбцам.
Добавьте подпись, обозначьте заголовки через <th> и задайте им подходящий scope.
Для многоуровневых заголовков задайте идентификаторы и свяжите с ними данные через headers.
Проверьте таблицу с клавиатуры и экранным диктором.

Добавьте подпись и краткое описание таблицы

Элемент <caption> задаёт видимое название таблицы и помогает понять её назначение до чтения ячеек. Если для интерпретации нужны дополнительные пояснения, разместите их рядом с таблицей и при необходимости свяжите с ней через aria-describedby.

Подпись кратко описывает, какие данные представлены.
Название не дублирует без необходимости соседний заголовок раздела.
Необходимые пояснения расположены рядом с таблицей, а не спрятаны только в визуальном оформлении.
Если используется aria-describedby, его значение указывает на существующий элемент с пояснением.
Подпись и пояснение понятны без чтения всей таблицы.
Визуальный порядок подписи, пояснения и таблицы соответствует порядку чтения страницы.

Сохраните смысл при адаптации таблицы под узкий экран

Адаптивность не должна менять отношения между заголовками и данными. Если таблица шире экрана, допустимо прокручивать её внутри контейнера, сохраняя семантическую разметку.

Не заменяйте таблицу набором визуально похожих блоков, если при этом теряются заголовки строк и столбцов.
Не скрывайте заголовки только ради компактного вида.
Проверьте, что прокручиваемую область можно достичь с клавиатуры и что её назначение понятно.
Не меняйте визуальный порядок столбцов так, чтобы он расходился с порядком чтения.
Не полагайтесь только на цвет или значки для передачи значения ячеек.
Проверьте длинные подписи и значения: они не должны перекрывать соседние данные или пропадать.

Проверьте навигацию клавиатурой и озвучивание

Проверьте не только код, но и то, как человек получает название таблицы, переходит между ячейками и узнаёт их заголовки. Услуги веб-разработки могут включать такую проверку, однако итоговую разметку важно тестировать в реальном интерфейсе после изменений.

Проверка клавиатурой. Перейдите к таблице клавишей Tab и убедитесь, что элементы управления внутри неё доступны, а прокрутка не блокирует работу.
Проверка экранным диктором. Прослушайте подпись, заголовки и значения при перемещении по строкам и столбцам. Убедитесь, что связи между ячейками понятны.
Проверка структуры. Используйте инструменты разработчика или средство аудита, чтобы выявить ошибки HTML и отсутствующие связи. Автоматический аудит доступности сайта полезен, но не заменяет ручную проверку озвучивания.

Если результат отличается в разных сочетаниях браузера и экранного диктора, проверьте разметку и повторите тестирование в целевой среде. Устраняйте найденные проблемы в коде, не добавляя ARIA-атрибуты там, где уже достаточно нативной семантики HTML.

Разбор частых ситуаций при работе с доступными таблицами

Нужно ли добавлять role="table" к обычной HTML-таблице?

Нет. Для стандартного элемента <table> браузер уже предоставляет семантику таблицы. Дополнительную роль обычно не требуется указывать.

Когда нужен атрибут scope?

Используйте scope="col" для заголовков столбцов и scope="row" для заголовков строк. Это подходящий вариант для простых таблиц с понятной сеткой данных.

Когда применять headers и id?

Они полезны в сложных таблицах с многоуровневыми или неоднозначными заголовками. Атрибут headers должен ссылаться на существующие идентификаторы соответствующих ячеек <th>.

Обязательно ли добавлять caption?

Для таблицы с данными подпись обычно помогает быстро понять её содержание. Используйте <caption>, если таблице нужно собственное название, и не заменяйте его только визуальным текстом рядом.

Можно ли прокручивать таблицу по горизонтали на мобильном экране?

Да, если прокрутка сохраняет доступ к данным и не разрушает семантическую структуру. Проверьте, что область прокрутки доступна при управлении клавиатурой и что пользователь понимает, как добраться до скрытой части.

Достаточно ли автоматической проверки доступности?

Нет. Автоматические инструменты могут находить часть ошибок разметки, но не подтверждают, что экранный диктор понятно озвучивает заголовки и значения. Дополните автоматическую проверку ручным тестированием.

Автор: Сергей Макаров.

Post Views: 0

Как сделать таблицу доступной для экранных дикторов в веб-разработке