Перейти к содержимому
Pandus
ru Сменить язык
Меню

Требование 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

Похожие проверки

Все правила, которые мы проверяем