Wymaganie WCAG A/AA Priorytet: Drobne · test eksperymentalny: warto sprawdzić ręcznie
Tytuł tabeli jest wpisany w komórkę tabeli
Tabela danych, np. tabela rozmiarów lub cennik, ma tytuł w scalonym pierwszym wierszu komórek zamiast we właściwym podpisie tabeli.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Czytniki ekranu odczytują podpis tabeli, gdy klient do niej dotrze, więc od razu wiadomo, czego dotyczy. Tytuł w komórce jest czytany jak dane, zaburza strukturę kolumn i utrudnia zrozumienie liczb.
Kogo to dotyczy
- niewidomi klienci
- użytkownicy czytników ekranu
Jak to naprawić
Przenieś tytuł z komórek do elementu <caption> umieszczonego zaraz po otwierającym znaczniku <table>, np. <caption>Tabela rozmiarów, koszulki damskie</caption>, i usuń scalony pierwszy wiersz (komórkę z colspan). W razie potrzeby nadaj podpisowi styl w CSS, aby wyglądał jak wcześniej.
W Shopify
Zwykle tabela rozmiarów lub inna tabela wklejona do opisu produktu lub strony albo wygenerowana przez aplikację. Popraw HTML tabeli w widoku kodu edytora lub poproś autora aplikacji o generowanie <caption>.
W Shoptet (CZ)
Zwykle tabela wklejona do opisu produktu lub artykułu. Popraw HTML tabeli w widoku kodu źródłowego edytora.
W PrestaShop
Zwykle tabela w opisie produktu, na stronie CMS lub w module. Popraw HTML 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. Sprawdź, czy wtyczka ma opcję tytułu lub podpisu tabeli, która generuje <caption>; w przeciwnym razie popraw HTML tabeli.
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 table-fake-caption.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Niektóre nagłówki tabeli nie opisują żadnych danych
WCAG 1.3.1 A
-
Element listy znajduje się poza listą
WCAG 1.3.1 A
-
Atrybuty dostępności zawierają literówki
WCAG 4.1.2 A
-
Niektóre filmy lub dźwięki włączają się same z dźwiękiem
WCAG 1.4.2 A