Перейти до вмісту
Pandus
uk Змінити мову
Меню

Вимога WCAG A/AA Пріоритет: Помірно · експериментальна перевірка: варто перевірити вручну

У великих таблицях є клітинки без заголовків

Більша таблиця з даними (понад 3 на 3 клітинки), наприклад таблиця розмірів, характеристик чи вартості доставки, не має клітинок-заголовків, тож значення не пов'язані з тим, що вони означають.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Програми зчитування з екрана озвучують клітинку разом із заголовками рядка й стовпця, наприклад «Розмір L, талія: 84 см». Без заголовків незрячі покупці чують лише потік чисел і не можуть зрозуміти, до якого розміру чи варіанта належить кожне.

Кого це стосується

  • незрячі покупці
  • користувачі програм зчитування з екрана

Як виправити

Позначте рядок заголовків, а також перший стовпець, якщо він називає рядки, тегом <th> замість <td> і додайте scope="col" або scope="row". Розмістіть рядок заголовків у <thead>. Для складних таблиць із кількома рівнями заголовків використовуйте атрибути id і headers. Якщо таблиця лише розташовує вміст візуально, замініть її на CSS-верстку або додайте role="presentation".

У Shopify

Зазвичай це таблиця розмірів чи характеристик в описі товару або таблиця, створена застосунком. У режимі коду редактора змініть клітинки <td> першого рядка на <th> або попросіть розробника застосунку виводити клітинки-заголовки.

У Shoptet (CZ)

Зазвичай це таблиця, вставлена в опис товару чи статтю. У режимі вихідного коду редактора змініть клітинки першого рядка на <th>.

У PrestaShop

Зазвичай це опис товару, CMS-сторінка або модуль характеристик товару. Змініть клітинки заголовків на <th> у режимі вихідного коду редактора або в шаблоні .tpl модуля.

У WooCommerce

Зазвичай це плагін таблиць або HTML, вставлений в опис товару. Багато плагінів таблиць мають опцію використовувати перший рядок як заголовок; увімкніть її або виправте HTML таблиці.

Стандарти

Стандарти
СтандартПункт
WCAG 2.2 1.3.1 (A) Info and Relationships
WCAG 2.1 1.3.1 (A) Info and Relationships
WCAG 2.0 1.3.1 (A) Info and Relationships
EN 301 549 4.1.1 9.1.3.1
EN 301 549 3.2.1 9.1.3.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.3.1

Автоматична перевірка: правило axe-core td-has-header. dequeuniversity.com, github.com, www.w3.org

Схожі перевірки

Усі правила, які ми перевіряємо