Доступные таблицы данных

Таблицы размеров, характеристики товаров, тарифы доставки, история заказов, таблицы сравнения — в магазинах таблиц больше, чем кажется. Пользователи экранных дикторов перемещаются по таблицам от ячейки к ячейке и слышат заголовок каждой ячейки, но только если заголовки есть в коде. Эта страница входит в серию доступных UI-паттернов.

Когда использовать таблицу

Используйте таблицу, когда у данных есть связь в двух измерениях: и строки, и столбцы что-то значат (размер × мерка, страна × стоимость доставки). Не используйте таблицы для вёрстки и не собирайте табличные данные из элементов div, оформленных как сетка.

Шаблон таблицы в APG описывает её как статическую структуру, которая «не является интерактивным виджетом», и говорит: «авторам настоятельно рекомендуется по возможности использовать нативный HTML-элемент table». Если во многих ячейках находятся интерактивные виджеты, шаблон grid из APG может сократить число остановок по Tab, — но grid это составной виджет со своей моделью навигации стрелками, и в магазине он нужен редко.

Применимые критерии WCAG

• 1.3.1 Информация и взаимосвязи (A): ячейки заголовков и их ячейки данных связаны в коде.
• 1.3.2 Значимая последовательность (A): порядок чтения осмыслен, когда таблица линеаризуется.
• 1.4.10 Перекомпоновка (AA): W3C называет таблицы данных (а не отдельные ячейки) содержимым, которому может понадобиться двумерная прокрутка; остальная страница всё равно должна перекомпоновываться.
• 2.1.1 Клавиатура (A): таблицу с горизонтальной прокруткой можно прокручивать с клавиатуры.
• 4.1.2 Имя, роль, значение (A): у кнопок сортировки есть имена, а состояние сортировки доступно.
• 2.4.6 Заголовки и подписи (AA): подписи и заголовки описывают содержимое.

Пример кода

<!-- Simple table: headers in the first row and first column -->
<table>
  <caption>Таблица размеров женских джинсов, в сантиметрах</caption>
  <thead>
    <tr>
      <th>Размер</th>
      <th>Талия</th>
      <th>Бёдра</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>S</th><td>66–70</td><td>92–96</td></tr>
    <tr><th>M</th><td>71–75</td><td>97–101</td></tr>
  </tbody>
</table>

<!-- Sortable column: a button in the header, aria-sort on the header cell -->
<th aria-sort="ascending">
  <button type="button">Цена</button>
</th>

<!-- Wide table on small screens: a focusable, named scroll container -->
<div class="table-scroll" role="region" aria-label="Тарифы доставки" tabindex="0">
  <table>…</table>
</div>

Замечания:

• Техника W3C H51 — «использование табличной разметки для представления табличной информации». H63 касается scope (row, col, rowgroup, colgroup): он нужен, когда заголовки находятся не в первой строке или первом столбце; для простых таблиц с заголовками в первой строке или первом столбце достаточно обычного th. Для сложных таблиц с заголовками на нескольких уровнях H43 использует id и headers.
• caption даёт таблице имя. Не имитируйте его полужирной первой строкой или заголовком выше, не связанным с таблицей.
• По APG, aria-sort ставится на заголовок отсортированного столбца; задавайте его только одному столбцу за раз.
• Если строки загружаются по страницам или виртуализированы, aria-rowcount и aria-rowindex сообщают ассистивным технологиям полный размер.

Работа с клавиатуры

В APG для шаблона таблицы работа с клавиатуры указана как «неприменимо»: таблица не является виджетом, и её ячейки не получают фокус. У экранных дикторов есть собственные команды навигации по таблицам. Интерактивные элементы внутри ячеек — ссылки, кнопки сортировки, поля количества — это обычные остановки по Tab.

Частые ошибки в интернет-магазинах

• Таблицы размеров в виде изображений без текстовой таблицы или в виде таблиц без единого th.
• Списки характеристик из элементов div, которые выглядят как два столбца, но не имеют структуры, — используйте таблицу или список описаний.
• Таблицы для вёрстки из старых шаблонов в стиле почтовых писем, размеченные через th.
• Таблицы сравнения с объединёнными ячейками заголовков и без атрибутов headers.
• Первая полужирная строка вместо caption или th.
• Широкие таблицы, которые выходят за страницу на мобильном, либо контейнер прокрутки, до которого нельзя добраться с клавиатуры.
• Ссылки сортировки без состояния, так что пользователь не знает текущий порядок.

Что находит автоматика и что остаётся для ручной проверки

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

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

Частые вопросы

Как сделать таблицу доступной?

Используйте настоящую HTML-таблицу для табличных данных, отмечайте ячейки заголовков элементом th, добавляйте scope там, где заголовки находятся не просто в первой строке или первом столбце, задайте таблице caption и не используйте таблицы для вёрстки.

Когда нужен атрибут scope?

Техника W3C H63 говорит, что простые таблицы с заголовками в первой строке или первом столбце работают с обычными элементами th; scope помогает, когда заголовки расположены в другом месте. Для сложных таблиц с многоуровневыми заголовками используйте атрибуты id и headers (H43).

Использовать role="table" или role="grid"?

Предпочитайте нативный элемент table; в APG это настоятельно рекомендуется везде, где возможно. Grid — интерактивный составной виджет с навигацией стрелками, который полезен, только когда в таблице много интерактивных ячеек.

Как показать, по какому столбцу выполнена сортировка?

Поставьте aria-sort="ascending" или "descending" на заголовок отсортированного столбца и сделайте элемент сортировки кнопкой внутри ячейки заголовка.

Может ли автоматическая проверка проверить таблицы?

Она находит ячейки данных без заголовков, заголовки без ячеек данных, неверные атрибуты headers, недопустимые значения scope и ложные подписи. Действительно ли это таблица данных и имеют ли заголовки смысл, она сказать не может.

Источники

• W3C WAI, APG Table pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
• W3C, Technique H63 Using the scope attribute: https://www.w3.org/WAI/WCAG22/Techniques/html/H63
• W3C WAI, APG Grid pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html