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

Описание

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

Пример использования:
<table role="grid"> <caption>Финансовый отчет</caption> <tr> <th scope="col">Квартал</th> <th scope="col">Доход</th> </tr> <tr> <td>Q1</td> <td>$120,000</td> </tr> </table>

Основные роли для таблиц:

Роль Описание Когда использовать
table Стандартная таблица данных (значение по умолчанию) Для обычных таблиц с данными
grid Интерактивная таблица с возможностью навигации Для таблиц с элементами управления
presentation Указывает, что таблица используется только для верстки Когда таблица не содержит реальных данных

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

  • Роль table назначается автоматически, если не указано иное
  • Для сложных таблиц могут потребоваться дополнительные ARIA-атрибуты
  • Роли влияют на навигацию с клавиатуры
  • Поддерживается современными скринридерами (NVDA, JAWS, VoiceOver)

Пример с разными ролями:

<!-- Таблица данных --> <table role="table"> <tr><td>Обычная таблица данных</td></tr> </table> <!-- Таблица для верстки --> <table role="presentation"> <tr><td>Элемент макета</td></tr> </table>

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

  • Используйте role="table" только при необходимости переопределить
  • Для табличных данных всегда добавляйте <th> с атрибутом scope
  • Избегайте role="presentation" для реальных данных
  • Тестируйте с различными скринридерами

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

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

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