Атрибут headers тега <td>

Описание

Атрибут headers для элемента <td> связывает ячейку данных с соответствующими заголовочными ячейками (<th>), что улучшает доступность таблицы для вспомогательных технологий, особенно для скринридеров.

Пример использования:
<table> <tr> <th id="product">Продукт</th> <th id="price">Цена</th> </tr> <tr> <td headers="product">Смартфон</td> <td headers="price">500$</td> </tr> </table>

Особенности работы:

  • Принимает список ID заголовочных ячеек, разделённых пробелами
  • Связывает ячейку данных с соответствующими заголовками по горизонтали и вертикали
  • Особенно полезен для сложных таблиц с несколькими уровнями заголовков
  • Поддерживается современными скринридерами (NVDA, JAWS, VoiceOver)

Пример сложной таблицы с headers:

<table> <tr> <th id="year" colspan="2">2025</th> </tr> <tr> <th id="q1">Q1</th> <th id="q2">Q2</th> </tr> <tr> <td headers="year q1">120K</td> <td headers="year q2">150K</td> </tr> </table>

Рекомендации:

  • Всегда используйте с атрибутом id в заголовочных ячейках
  • Для сложных таблиц указывайте все релевантные заголовки
  • Порядок ID в атрибуте headers влияет на порядок озвучивания
  • Тестируйте с различными скринридерами

Ограничения:

  • Требует тщательной разметки заголовков
  • Может быть избыточным для простых таблиц
  • Не все скринридеры одинаково обрабатывают множественные headers

Примечание: Для простых таблиц с одним уровнем заголовков достаточно атрибута scope в <th> элементах.