Что представляет собой table?

Посмотрел доклад Эда Соудена — работает над государственными сайтами Великобритании — "What even is a table? A quick look at Accessibility APIs".

Эд рассказывает про работу с таблицами с точки зрения доступности. Скринридеры позволяют перемещаться по таблицам не только от колонки к колонке, но и к следующей строке в пределах одной колонки. Если применить к таблице свойство display: block, например, чтобы добавить overflow: scroll для небольших экранов, то скринридер больше ну будет воспринимать таблицу как таблицу и навигация будет сломана. Более того недостаточно использовать семантические теги, так как браузеры использует эвристику для определения табличной вёрстки. Если таблица состоит из одной ячейки, то она не будет считаться таблицей. Если таблица состоит из трёх-четырёх ячеек, которые занимают 95% ширины страницы, то она тоже не будет считаться таблицей (в Firefox). Но если таблица содержит двадцать строк, то она становится таблицей. Если в таблице в строках чередуется цвет, то она тоже будет считаться таблицей.

В конце доклада Эд советует всегда "слушать" вёрстку сайта с помощью скринридеров и не использовать атрибут role="table" для изменения семантики элемента, так это может вести к проблемам.

Доклад интересный. Очень рекомендую посмотреть, если интересуетесь темой a11y.

https://vimeo.com/139062429

← На главную