gridcell

Самостоятельная роль виджета из WAI-ARIA для ячейки из обычной или древовидной сетки.

Сетка чем-то похожа на таблицу. Она состоит из колонок и строк с ячейками, на которых можно делать фокус и перемещаться между ними с помощью стрелок в разных направлениях. С сетками, например, могли сталкиваться в Exel.

В HTML нет тега с такой ролью.

Задайте role="gridcell" любому тегу, лучше всего <div>, <span> или <td>.

gridcell обязательно должна быть вложена или связана с другим элементом с ролью row. Роль row уже есть у <tr>. Если это полностью кастомная сетка, не забудьте про заголовки ячеек или строк с ролями rowheader или columnheader, связанные со строками row.

Элемент с gridcell обязательно должен находится внутри другого с grid или treegrid.

Ячейки можно редактировать, выбирать и делать на них фокус. С этим помогут JavaScript и глобальный атрибут tabindex.

Внутри ячеек могут быть интерактивные элементы. Например, ссылки, кнопки или чекбоксы.

Элементам с ролью gridcell можно задавать все глобальные ARIA-атрибуты и атрибуты виджетов — aria-disabled, aria-errormessage, aria-expanded, aria-haspopup, aria-invalid, aria-readonly, aria-required и aria-selected.