Wymaganie WCAG A/AA Priorytet: Umiarkowane · test eksperymentalny: warto sprawdzić ręcznie

Duże tabele mają komórki bez nagłówków

Większa tabela danych (ponad 3 na 3 komórki), np. tabela rozmiarów, specyfikacji lub kosztów dostawy, nie ma komórek nagłówkowych, więc wartości nie są powiązane z tym, co oznaczają.

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

Dlaczego to ważne dla Twoich klientów

Czytniki ekranu odczytują komórkę razem z nagłówkami wiersza i kolumny, np. „Rozmiar L, talia: 84 cm”. Bez nagłówków niewidomi klienci słyszą tylko ciąg liczb i nie wiedzą, do którego rozmiaru lub wariantu należy każda z nich.

Kogo to dotyczy

niewidomi klienci
użytkownicy czytników ekranu

Jak to naprawić

Oznacz wiersz nagłówków, a także pierwszą kolumnę, jeśli nazywa wiersze, znacznikiem <th> zamiast <td> i dodaj scope="col" lub scope="row". Umieść wiersz nagłówków w <thead>. W złożonych tabelach z kilkoma poziomami nagłówków użyj atrybutów id i headers. Jeśli tabela służy tylko do wizualnego układu treści, zastąp ją układem CSS lub dodaj role="presentation".

W Shopify

Zwykle tabela rozmiarów lub specyfikacji w opisie produktu albo tabela wygenerowana przez aplikację. W widoku kodu edytora zmień komórki <td> pierwszego wiersza na <th> lub poproś autora aplikacji o generowanie komórek nagłówkowych.

W Shoptet (CZ)

Zwykle tabela wklejona do opisu produktu lub artykułu. W widoku kodu źródłowego edytora zmień komórki pierwszego wiersza na <th>.

W PrestaShop

Zwykle w opisie produktu, na stronie CMS lub w module cech produktu. Zmień komórki nagłówków na <th> w widoku kodu źródłowego edytora lub w szablonie .tpl modułu.

W WooCommerce

Zwykle wtyczka do tabel lub HTML wklejony do opisu produktu. Wiele wtyczek do tabel ma opcję użycia pierwszego wiersza jako nagłówka; włącz ją lub popraw HTML 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-has-header. dequeuniversity.com, github.com, www.w3.org

Na telefonie nie można powiększyć strony
WCAG 1.4.4 AA
Użytkownicy klawiatury nie mogą dotrzeć do osadzonej treści
WCAG 2.1.1 A
Filmy nie mają napisów
WCAG 1.2.2 A
Strona zawiera przestarzały kod migającego tekstu
WCAG 2.2.2 A

Wszystkie reguły, które sprawdzamy