Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>9 мар 2022</li>

3 <li>0</li>

4 </ul>Глафира Жур провела небольшое исследование и выяснила, как вернуть таблицам доступность после осенних обновлений Chrome.

5 Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

6 Недавно я обнаружила, что скринридер не читает таблицы в Chrome. При этом они выглядят как таблицы, описаны стандартными табличными<a>HTML</a>-тегами, никаких дополнительных стилей к ним не применяли и не меняли роль. Короче говоря, стандартная структура:table > tbody > (tr > td*3)*3.

7 Обыкновенная HTML-таблицаСкриншот: Skillbox MediaСчитается, что сделать таблицы доступными можно, соблюдая два основных правила:

8 1. Задать таблице имя. Например, с помощью<caption>внутри<table>или внешнего лейбла aria-label - специально для программ, читающих с экрана.

9 2. Задать заголовочную ячейку<th>, чтобы пользователь скринридера понимал, на каком элементе он находится.

10 Однажды я столкнулась с таким блоком данных:

11 OpenHighCloseLowЯ думала, что он свёрстан при помощи div, поэтому ожидала, что скринридер прочитает ячейки в порядкеOpen -> Close -> High -> Low. В этом случае первым прозвучал бы div с Open / Close, а потом div с High / Low. Но скринридер прочитал таблицу построчно:Open -> High -> Close -> Low. Получилась какая-то путаница!

12 Я заглянула в код и увидела, что таблица свёрстана как table - поэтому она и не читалась в ожидаемом порядке. Но возник другой вопрос: почему скринридер не сказал, что читает table? Тогда я проверила роль в Accessibility Tree и нашлаrole="layouttable"!

13 Простая таблица без стилей в Chrome. Внимание на правую часть экранаСкриншот: Skillbox MediaОткуда взяласьrole = "layouttable" - в<a>спеке</a> не сказано. Сообщений об апдейте Chrome, связанных с этим параметром, я пока тоже не нашла. И в Firefox такого прикола нет - все таблицы обозначаются какrole="table".

14 Та же таблица в FirefoxСкриншот: Skillbox MediaВ результате собственного расследования и благодаря ответу на <a>вопрос</a>в чате Accessibility Community выяснилось, что, если в таблице нет тегов<th>, браузер рассматривает её как layout-таблицу и добавляетrole="layouttable". Поэтому скринридер перестаёт её читать как таблицу.

15 Статья написана на основе треда Глафиры в <a>Twitter</a>.

16 Кроме того, если у таблицы нет<th>, но атрибутом задана ширина границ (например,border="1") - таблица снова становится table и читается скринридером.

17 Та же таблица с заданным значением borderСкриншот: Skillbox MediaЗаметьте: если в структуре HTML-документа не установить<th>или border, но задать значение свойства border в <a>CSS</a> - таблица так и останется layouttable.

18 Вывод: если хотите, чтобы скринридер правильно читал ваши таблицы в Google Chrome, - не забывайте прописывать<th>.

19 Ещё для<th>полезно выставлять значение атрибутаscope "col", если это заголовок столбца, или"row", если заголовок строки.

20 На <a>webaim.org</a>работа скринридера с таблицами описывается следующим образом:

21 "Скринридеры анализируют разметку и структуры таблицы, чтобы "угадать“, является ли она data table или layout table. Поэтому очень важно, чтобы элементы разметки data table, такие как <caption> и <th>, НИКОГДА не использовались в layout table".

22 Таблица с явно заданным role="table"Скриншот: Skillbox MediaКак подметил <a>@zavsievich</a>в Twitter, если явно задать таблице без<th>role="table", то Chrome будет говорить скринридеру, что перед ним - таблица. Её дочерние элементы будут читаться как нужно, а скринридер сможет правильно по ней перемещаться.

23 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>