Доступные таблицы и списки: заголовки, области и структура

Прямой ответ

Таблица объявляет заголовки столбцов и связь ячейки с заголовком, поэтому значение ячейки читается вместе с названием столбца.

<table>
  <caption>Тарифы по регионам</caption>
  <thead><tr><th scope="col">Регион</th><th scope="col">Тариф</th></tr></thead>
  <tbody><tr><td>Север</td><td>120</td></tr></tbody>
</table>

Заголовок столбца объявлен с направлением, поэтому значение ячейки читается вместе с названием столбца. О семантике — в статье про семантическую разметку HTML.

Заголовки таблицы и направление

Заголовок столбца объявляет значение ячеек, поэтому направление заголовка определяет, к каким ячейкам он относится.

Заголовок столбца. Элемент заголовка с направлением по столбцу относится ко всем ячейкам столбца, поэтому значение читается с названием.

Заголовок строки. Элемент заголовка с направлением по строке относится к ячейкам строки, поэтому значение читается с названием строки.

Отсутствие заголовка. Ячейка без связанного заголовка читается без контекста, поэтому значение не определяется.

Практическое следствие: таблица без заголовков читается как последовательность значений, поэтому принадлежность значения столбцу не определяется.

Отдельный аспект — таблица, размеченная блоками. Набор значений, размещенный произвольными блоками, не объявляет структуру таблицы, поэтому связь значения с заголовком недоступна.

Подпись таблицы и сложные заголовки

Подпись объявляет назначение таблицы, поэтому содержимое определяется до чтения значений.

Назначение таблицы. Подпись описывает, что содержит таблица, поэтому пользователь определяет состав до чтения значений.

Сложные заголовки. Таблица с несколькими уровнями заголовков требует явной связи ячейки с заголовками, поэтому принадлежность значения объявляется.

Группы столбцов. Объединение столбцов объявляется отдельным элементом, поэтому общий заголовок группы читается вместе с ячейкой.

Практическое следствие: таблица без подписи читается как набор значений без указания назначения, поэтому содержимое определяется по первым ячейкам.

Структура списков и объявление числа пунктов

Список объявляет структуру и число пунктов, поэтому пользователь определяет объём перечня до чтения пунктов.

Семантический список. Пункты размещаются элементами списка, поэтому число пунктов объявляется при входе в перечень.

Произвольные блоки. Пункты, размещённые блоками, не объявляют структуру, поэтому число пунктов и принадлежность к перечню недоступны.

Вложенные списки. Уровень вложенности объявляется, поэтому иерархия перечня читается корректно.

Практическое следствие: перечень, размеченный блоками с переносами строк, читается как сплошной текст, поэтому число пунктов не определяется.

Об основах доступности — в статье про доступность веб-интерфейсов; об атрибутах — в статье про ARIA-атрибуты.

Сортировка таблицы и объявление порядка

Сортировка изменяет порядок строк, поэтому текущий порядок сортировки объявляется вместе с заголовком столбца.

Состояние сортировки. Заголовок столбца объявляет направление сортировки, поэтому пользователь определяет текущий порядок без визуального контроля.

Изменение порядка. Смена направления объявляется после действия, поэтому результат сортировки доступен без чтения таблицы.

Порядок чтения. Строки читаются в порядке отображения, поэтому сортировка меняет последовательность объявления значений.

Практическое следствие: таблица с сортировкой без объявления направления не сообщает текущий порядок, поэтому пользователь не определяет, по какому столбцу отсортированы значения.

Отдельный аспект — обновление содержимого. Таблица, обновляемая без объявления изменения, меняет значения без уведомления, поэтому пользователь читает прежнее содержимое.

Практика: разметка таблиц и списков

1. Размечайте табличные данные элементами таблицы. Структура объявляется разметкой, поэтому связь значения с заголовком доступна.

2. Объявляйте заголовки столбцов с направлением. Значение ячейки читается вместе с названием столбца.

3. Добавляйте подпись таблицы. Назначение таблицы определяется до чтения значений.

4. Связывайте ячейки с заголовками в сложных таблицах. Принадлежность значения объявляется при нескольких уровнях заголовков.

5. Объявляйте группы столбцов отдельным элементом. Общий заголовок группы читается вместе с ячейкой.

6. Размечайте перечни элементами списка. Число пунктов объявляется при входе в перечень.

7. Проверяйте чтение таблицы вспомогательной технологией. Связь значения с заголовком подтверждается проверкой.

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

1. Не размечайте табличные данные произвольными блоками. Структура не объявляется, поэтому связь значения с заголовком недоступна.
2. Учитывайте сложные заголовки при объединении ячеек. Без явной связи принадлежность значения не определяется.
3. Сопоставляйте подпись таблицы с её содержимым. Подпись описывает назначение, а не повторяет заголовок раздела.
4. Фиксируйте проверку чтения в процессе разработки. Нарушение структуры обнаруживается до выпуска.
5. Пересматриваем разметку при добавлении столбца. Новый столбец требует заголовка с направлением.

Практический сценарий: значения таблицы читались без названия столбца

Контекст: пользователь экранный читалки слышал последовательность чисел без указания, к какому столбцу относится значение.

1. Диагностика. Проверка показала, что первая строка таблицы была размечена ячейками данных вместо элементов заголовка. Направление заголовка не объявлялось, поэтому связь значения со столбцом отсутствовала.
2. Причина. Заголовки столбцов не были размечены соответствующим элементом, поэтому таблица читалась как последовательность значений без структуры.
3. Действия. (а) Заменили ячейки первой строки на элементы заголовка с указанием направления по столбцу; (б) добавили подпись таблицы, чтобы назначение определялось до чтения значений; (в) выделили группу заголовков отдельным элементом, чтобы структура читалась единообразно; (г) проверили связь значения с заголовком вспомогательной технологией на нескольких строках; (д) проверили перечни на странице и заменили размеченные блоками пункты элементами списка.
4. Результат. Значение ячейки читается вместе с названием столбца, поэтому принадлежность значения определена.

Вывод: таблица без заголовков столбцов читается как последовательность значений, поэтому принадлежность значения столбцу не определяется. Разметка заголовков с направлением и подпись таблицы делают связь значения с заголовком доступной.

FAQ

Зачем объявлять направление заголовка таблицы? Направление определяет, к каким ячейкам относится заголовок, поэтому значение ячейки читается вместе с названием столбца либо строки.

Что даёт подпись таблицы? Назначение таблицы определяется до чтения значений. Без подписи содержимое определяется по первым ячейкам.

Чем отличается семантический список от блоков с переносами строк? Список объявляет число пунктов и структуру перечня. Блоки читаются как сплошной текст, поэтому объём перечня не определён.

Как разметить таблицу с несколькими уровнями заголовков? Явной связью ячейки с заголовками. Без связи принадлежность значения при объединённых заголовках не определяется.

Источники: W3C WAI Tables Tutorial, HTML tabular data, WCAG 2.2 Info and Relationships — ссылки в шапке.