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

Описание

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

Пример использования:
<table> <tr> <td role="cell">Обычная ячейка данных</td> <td role="gridcell">Интерактивная ячейка</td> </tr> </table>

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

Роль Описание Когда использовать
cell Обычная ячейка данных (значение по умолчанию) Для стандартных табличных данных
gridcell Интерактивная ячейка в таблице-гриде Для редактируемых или интерактивных таблиц
columnheader Ячейка-заголовок столбца Альтернатива <th scope="col">
rowheader Ячейка-заголовок строки Альтернатива <th scope="row">

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

  • Элемент <td> по умолчанию имеет роль cell
  • Чаще всего требуется для переопределения стандартной семантики
  • Должен сочетаться с соответствующими ролями для таблицы и строк
  • Поддерживается современными скринридерами (NVDA, JAWS, VoiceOver)

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

<table role="grid"> <tr role="row"> <td role="gridcell" tabindex="0">Редактируемое значение</td> </tr> </table>

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

  • Для обычных таблиц используйте стандартную разметку без явного указания role
  • Указывайте роль только при изменении стандартного поведения
  • Сочетайте с другими ARIA-атрибутами для сложных сценариев
  • Тестируйте с различными скринридерами

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

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

Примечание: В большинстве случаев достаточно стандартной HTML-разметки таблиц. Используйте ARIA-роли только для специальных интерактивных компонентов.