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

Оновлено 14 жовтня 2026 · 5 хв читання

Таблиці розмірів, характеристики товарів, тарифи доставки, історія замовлень, порівняльні таблиці — у магазинів таблиць більше, ніж вони думають. Користувачі програм зчитування з екрана переходять таблицею клітинка за клітинкою й чують заголовок кожної клітинки, але лише якщо заголовки є в коді. Ця сторінка входить до серії доступні 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.

Клавіша	Функція
Tab	Переходить до наступного посилання, кнопки чи поля всередині таблиці
Стрілки (коли фокус на контейнері прокрутки)	Прокручують широку таблицю по горизонталі
Команди таблиці в програмі зчитування з екрана	Переміщують клітинка за клітинкою; заголовок кожної клітинки оголошується

Типові помилки в інтернет-магазинах

Таблиці розмірів у вигляді зображень без текстової таблиці або таблиці без жодного th.
Списки характеристик, побудовані з елементів div, що виглядають як два стовпці, але не мають структури, — використовуйте таблицю або список визначень.
Таблиці для верстки зі старих шаблонів у стилі листів, розмічені через th.
Порівняльні таблиці з об'єднаними клітинками-заголовками і без атрибутів headers.
Перший жирний рядок замість caption чи th.
Широкі таблиці, що вилазять за сторінку на мобільному, або контейнер прокрутки, до якого користувачі клавіатури не дістануться.
Посилання сортування без стану, тож користувачі не знають поточного порядку.

Що знаходить автоматична перевірка, а що — ручне тестування

Автоматично (правило axe-core)	Що знаходить
`td-has-header`	Клітинки даних у більших таблицях без заголовка
`th-has-data-cells`	Клітинки-заголовки, що не описують жодних клітинок даних
`td-headers-attr`	Атрибути `headers`, що вказують за межі таблиці
`table-fake-caption`	Перший рядок, використаний як підпис
`empty-table-header`	Клітинки-заголовки без тексту (порада)
`scope-attr-valid`	Недійсні значення `scope` (порада)
`table-duplicate-name`	Підпис і summary з однаковим текстом (порада)
`scrollable-region-focusable`	Контейнер прокрутки, до якого користувачі клавіатури не дістануться

Усі вони є картками в нашій бібліотеці правил. Ручне тестування: вирішіть, чи кожна таблиця — це дані чи верстка, перевірте, що заголовки правильні й змістовні, пройдіть таблицею командами навігації таблицею програми зчитування з екрана та перевірте таблицю на екрані завширшки 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