Wymaganie WCAG A/AA Priorytet: Umiarkowane

Niektóre nagłówki tabeli nie opisują żadnych danych

Tabela zawiera komórki nagłówkowe (<th>), które nie są powiązane z żadnymi komórkami danych, np. pusty wiersz nagłówków w tabeli rozmiarów lub tabela, w której <th> służy tylko do pogrubienia tekstu.

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

Dlaczego to ważne dla Twoich klientów

Czytniki ekranu odczytują nagłówki, które do niczego nie prowadzą, lub nie potrafią przypisać wartości do właściwego nagłówka, więc niewidomy klient może źle odczytać tabelę rozmiarów, cen lub opcji dostawy.

Kogo to dotyczy

niewidomi klienci
osoby korzystające z czytników ekranu

Jak to naprawić

Każdy element <th> (oraz każdy element z role="columnheader" lub role="rowheader") powinien mieć komórki danych w swojej kolumnie lub wierszu. Należy usunąć puste nagłówki lub zamienić je na <td>, nie używać <th> tylko do pogrubienia i dbać o kompletne wiersze i kolumny. Tabele służące wyłącznie do układu strony nie powinny w ogóle zawierać <th>.

W Shopify

Zwykle tabela rozmiarów lub specyfikacji wklejona do opisu produktu albo wygenerowana przez aplikację tabel rozmiarów lub zakładek produktu. 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 tak, aby pod każdym nagłówkiem lub obok niego znajdowały się dane.

W PrestaShop

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

W WooCommerce

Zwykle tabela utworzona wtyczką tabel lub tabel rozmiarów, widżet tabeli w kreatorze stron albo HTML wklejony do opisu produktu. Warto sprawdzić ustawienia wiersza nagłówków we wtyczce lub poprawić kod 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 th-has-data-cells. dequeuniversity.com, github.com, www.w3.org

Lista jest zbudowana nieprawidłowo
WCAG 1.3.1 A
Niestandardowym kontrolkom brakuje wymaganych informacji
WCAG 4.1.2 A
Atrybuty dostępności użyto w niewłaściwej sytuacji
WCAG 4.1.2 A
Niestandardowe menu lub listy są zbudowane nieprawidłowo
WCAG 1.3.1 A

Wszystkie reguły, które sprawdzamy