Деякі клітинки таблиці посилаються на неправильні заголовки

Таблиця, наприклад таблиця розмірів, характеристик чи вартості доставки, пов'язує клітинки із заголовками через атрибут 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

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