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

Описание

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

Пример использования:
<table> <thead role="rowgroup"> <tr role="row"> <th role="columnheader">Заголовок 1</th> <th role="columnheader">Заголовок 2</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell">Данные 1</td> <td role="cell">Данные 2</td> </tr> </tbody> </table>

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

Роль Описание Когда использовать
rowgroup Группа строк (значение по умолчанию для <thead>) Всегда для семантически правильных таблиц
none Игнорировать семантику элемента Когда таблица используется для макета

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

  • Стандартная семантика <thead> уже включает роль rowgroup
  • Явное указание роли улучшает поддержку в старых браузерах
  • Должен сочетаться с правильными ролями для <tr> и <th>
  • Поддерживается современными скринридерами

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

  • Используйте вместе с aria-label для сложных таблиц
  • Сочетайте с атрибутами aria-sort для сортируемых заголовков
  • Для таблиц данных всегда указывайте role="rowgroup"
  • Тестируйте с различными скринридерами

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

<table aria-label="Финансовый отчет"> <thead role="rowgroup"> <tr role="row"> <th role="columnheader" aria-sort="ascending">Дата</th> <th role="columnheader">Сумма</th> </tr> </thead> <tbody role="rowgroup"> <tr role="row"> <td role="cell">2025-01-15</td> <td role="cell">1 200₽</td> </tr> </tbody> </table>

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

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

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

  • Используйте aria-describedby для связей с описаниями
  • Добавляйте aria-live для динамически изменяемых таблиц
  • Реализуйте клавиатурную навигацию