Некоторые ячейки таблицы ссылаются на неправильные заголовки

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

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Скринридеры используют эти связи, чтобы озвучить значение вместе с заголовками, например «Размер M, обхват груди: 96 см». Когда связи сломаны, незрячие покупатели слышат числа, не понимая, к чему они относятся, и могут выбрать не тот размер или вариант.

Кого это касается

незрячие покупатели
пользователи скринридеров

Как исправить

Каждый ID в атрибуте headers ячейки должен принадлежать элементу <th> в той же таблице, и ячейка не может ссылаться сама на себя. Исправьте неправильные или отсутствующие ID. Для простых таблиц часто проще совсем убрать атрибуты headers и разметить заголовки через <th scope="col"> и <th scope="row">, которые скринридеры понимают без дополнительных связей.

В Shopify

Обычно это таблица размеров или характеристик, вставленная в описание товара или страницу либо созданная приложением таблиц размеров. Исправьте HTML таблицы в режиме кода редактора или обратитесь к разработчику приложения.

В Shoptet (CZ)

Обычно это таблица, вставленная в описание товара или статью. Исправьте HTML таблицы в редакторе; большинству простых таблиц достаточно ячеек <th> без атрибута headers.

В PrestaShop

Обычно это таблица в описании товара, на CMS-странице или в модуле характеристик товара. Исправьте HTML в редакторе или в шаблоне .tpl модуля.

В WooCommerce

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

Стандарты

Стандарты
Стандарт	Пункт
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-headers-attr. dequeuniversity.com, github.com, www.w3.org

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