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

Описание

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

Пример использования:
<table> <tr aria-selected="true" aria-expanded="false"> <td>Выбранная строка</td> <td>Свернутый контент</td> </tr> </table>

Наиболее полезные ARIA-атрибуты для строк:

Атрибут Описание Пример значения
aria-selected Указывает, выбрана ли строка true/false
aria-expanded Показывает, раскрыта ли строка (для детализации) true/false/undefined
aria-label Краткое описание строки "Товар ID-12345"
aria-describedby Ссылка на элемент с описанием ID описательного элемента
aria-rowindex Позиция строки в таблице 2 (вторая строка)

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

<table role="grid" aria-label="Отчет по продажам"> <tr role="row" aria-selected="false" aria-rowindex="1" onclick="toggleSelection(this)"> <td role="gridcell">Товар A</td> <td role="gridcell">$100</td> </tr> <tr role="row" aria-selected="true" aria-rowindex="2" onclick="toggleSelection(this)"> <td role="gridcell">Товар B</td> <td role="gridcell">$200</td> </tr> </table>

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

  • Используйте вместе с соответствующими role-атрибутами
  • Обновляйте динамические атрибуты (selected, expanded) через JavaScript
  • Для сортируемых таблиц используйте aria-sort
  • Сочетайте с клавиатурной навигацией

Ограничения и предупреждения:

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

Примечание: Для максимальной доступности тестируйте реализацию с различными скринридерами (NVDA, JAWS, VoiceOver) и соблюдайте WAI-ARIA Authoring Practices.