Zalecana praktyka Priorytet: Drobne
Komórka nagłówka tabeli jest pusta
Tabela ma komórkę nagłówka bez tekstu, na przykład lewy górny róg tabeli rozmiarów lub kolumnę z przyciskami akcji. To zalecana dobra praktyka, a nie wymóg WCAG na poziomie AA.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Gdy osoba z czytnikiem ekranu porusza się po tabeli, przed każdą wartością odczytywany jest nagłówek, który wyjaśnia jej znaczenie. Pusty nagłówek zostawia wartości bez kontekstu, więc tabela rozmiarów, porównanie cen czy historia zamówień stają się trudniejsze do zrozumienia.
Kogo to dotyczy
- użytkownicy czytników ekranu
- osoby niewidome
- osoby słabowidzące korzystające z lupy ekranowej z mową
Jak to naprawić
Nadaj każdemu <th> (lub elementowi z role="columnheader" albo "rowheader") tekst opisujący kolumnę lub wiersz, np. „Rozmiar” albo „Akcje”. Jeśli tekst ma nie być widoczny, użyj tekstu ukrytego wizualnie zamiast pustej komórki. Jeśli komórka tak naprawdę nie jest nagłówkiem, np. pusty narożnik, użyj <td> zamiast <th>.
W Shopify
Tabele zwykle pochodzą z opisów produktów, stron z tabelą rozmiarów lub aplikacji. Edytuj tabelę w edytorze tekstu lub aplikacji, aby każda komórka nagłówka miała tekst; w tabelach tworzonych przez motyw popraw szablon Liquid.
W Shoptet (CZ)
Zwykle pochodzi z tabel w opisach produktów lub na stronach tekstowych. Edytuj tabelę w edytorze i uzupełnij komórki nagłówka; w przypadku tabel w samym szablonie zwróć się do Shoptet lub partnera.
W PrestaShop
Może występować w opisach produktów, na stronach porównania i w szablonach konta klienta. Edytuj treść w panelu administracyjnym albo nadpisz plik .tpl motywu.
W WooCommerce
Częste we wtyczkach tabel rozmiarów, porównań i tabel oraz na stronach konta, np. w historii zamówień. Uzupełnij nagłówek w ustawieniach wtyczki albo nadpisz szablon w motywie potomnym.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core empty-table-header.
dequeuniversity.com, github.com, www.w3.org