Атрибут role тега <th>

Описание

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

Пример использования:
<table> <tr> <th role="columnheader">Заголовок столбца</th> <th role="rowheader">Заголовок строки</th> </tr> <tr> <td>Данные</td> <td>Данные</td> </tr> </table>

Основные роли для <th>:

Роль Описание Когда использовать
columnheader Заголовок столбца Для заголовков в верхней строке таблицы
rowheader Заголовок строки Для заголовков в первом столбце

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

  • Улучшает доступность для скринридеров
  • Не заменяет стандартную семантику HTML
  • Работает в сочетании с ARIA-атрибутами
  • Поддерживается современными скринридерами

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

  • Используйте вместе с атрибутом scope
  • Для сложных таблиц добавляйте aria-describedby
  • Избегайте избыточного использования (стандартные <th> уже имеют роль)
  • Тестируйте с различными скринридерами

Пример с ARIA-атрибутами:

<table aria-label="Финансовый отчет"> <tr> <th role="columnheader" scope="col" aria-sort="none">Месяц</th> <th role="columnheader" scope="col" aria-sort="ascending">Доход</th> </tr> <tr> <td>Январь</td> <td>10000</td> </tr> </table>

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

  • Избыточное использование может ухудшить доступность
  • Требуется точное соответствие реальной функции элемента
  • Разная поддержка в старых браузерах
  • Не заменяет правильную структуру таблицы

Примечание: Для сложных таблиц используйте:

  • aria-labelledby для связи с описанием
  • aria-describedby для дополнительной информации
  • ARIA-роли состояния (aria-sort, aria-selected)