Niektóre komórki tabeli wskazują niewłaściwe nagłówki

Tabela, np. tabela rozmiarów, specyfikacji lub kosztów dostawy, łączy komórki z nagłówkami za pomocą atrybutu headers, ale część tych powiązań nie wskazuje komórek nagłówkowych tej samej tabeli.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Czytniki ekranu korzystają z tych powiązań, aby odczytać wartość razem z nagłówkami, np. „Rozmiar M, obwód klatki piersiowej: 96 cm”. Gdy powiązania są błędne, niewidomi klienci słyszą liczby bez kontekstu i mogą wybrać niewłaściwy rozmiar lub wariant.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu

Jak to naprawić

Każdy identyfikator w atrybucie headers komórki musi należeć do elementu <th> w tej samej tabeli, a komórka nie może wskazywać samej siebie. Należy poprawić błędne lub brakujące identyfikatory. W prostych tabelach często łatwiej całkowicie usunąć atrybuty headers i oznaczyć nagłówki jako <th scope="col"> i <th scope="row">, które czytniki ekranu rozumieją bez dodatkowych powiązań.

W Shopify

Zwykle tabela rozmiarów lub specyfikacji wklejona do opisu produktu lub strony albo wygenerowana przez aplikację tabel rozmiarów. Należy poprawić HTML tabeli w widoku kodu edytora lub zwrócić się do twórcy aplikacji.

W Shoptet (CZ)

Zwykle tabela wklejona do opisu produktu lub artykułu. Należy poprawić HTML tabeli w edytorze; większość prostych tabel potrzebuje tylko komórek <th>, bez atrybutu headers.

W PrestaShop

Zwykle tabela w opisie produktu, na stronie CMS lub w module cech produktu. Należy poprawić HTML w edytorze lub w szablonie .tpl modułu.

W WooCommerce

Zwykle tabela utworzona wtyczką tabel lub tabel rozmiarów albo HTML wklejony do opisu produktu. Warto sprawdzić opcje dostępności wtyczki lub poprawić identyfikatory w kodzie tabeli.

Normy

Normy
Norma	Punkt
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

Automatyczny test: reguła axe-core td-headers-attr. dequeuniversity.com, github.com, www.w3.org

Strona nie określa, w jakim jest języku
WCAG 3.1.1 A
Atrybuty dostępności mają nieprawidłowe wartości
WCAG 4.1.2 A
Niektóre przełączniki i pola wyboru nie mają nazwy
WCAG 4.1.2 A
Niektóre grafiki wektorowe nie mają opisu tekstowego
WCAG 1.1.1 A

Wszystkie reguły, które sprawdzamy