Атрибут aria-* тега <thead>

Описание

Атрибуты aria-* в теге <thead> предоставляют дополнительную семантическую информацию для вспомогательных технологий о группе заголовков таблицы. Они улучшают доступность сложных табличных структур.

Пример использования:
<table> <thead aria-label="Заголовки финансового отчета" aria-describedby="table-desc"> <tr> <th aria-sort="ascending">Дата</th> <th>Сумма</th> </tr> </thead> <tbody> <tr> <td>2025-01-15</td> <td>1 200₽</td> </tr> </tbody> </table> <div id="table-desc" hidden>Данные за 2025 год в рублях</div>

Основные ARIA-атрибуты:

Атрибут Описание Пример
aria-label Краткое описание группы заголовков aria-label="Заголовки таблицы"
aria-describedby Связь с дополнительным описанием aria-describedby="table-desc"
aria-rowcount Общее количество строк (если известно) aria-rowcount="100"

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

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

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

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

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

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

Примечание: Для профессиональной доступности:

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