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

Описание

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

Пример использования:
<table> <tr role="row"> <td role="cell">Стандартная строка таблицы</td> </tr> </table>

Наиболее распространённые роли:

Значение role Описание Когда использовать
row Стандартная строка таблицы (значение по умолчанию) Для обычных строк данных
rowheader Строка-заголовок для группы строк Для заголовков групп в сложных таблицах
separator Визуальный разделитель Для строк-разделителей без семантического значения

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

  • По умолчанию <tr> уже имеет роль "row"
  • Явное указание роли улучшает поддержку старых браузеров
  • Должен сочетаться с правильными ролями для ячеек
  • Влияет на навигацию по таблице с помощью скринридеров

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

<table role="grid"> <tr role="rowheader"> <td role="columnheader">Отдел</td> <td role="columnheader">Бюджет</td> </tr> <tr role="row"> <td role="cell">Маркетинг</td> <td role="cell">$50,000</td> </tr> </table>

Рекомендации по доступности:

  • Используйте role="row" только при необходимости переопределения
  • Для интерактивных строк добавьте соответствующую роль (button, link)
  • Сочетайте с aria-* атрибутами для полной семантики
  • Тестируйте с различными скринридерами

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

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

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