Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Střední · experimentální kontrola: vyplatí se ověřit ručně

Velké tabulky mají buňky bez záhlaví

Větší datová tabulka (více než 3 × 3 buňky), například tabulka velikostí, technických parametrů nebo cen dopravy, nemá buňky záhlaví, takže hodnoty nejsou propojené s tím, co znamenají.

Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.

Proč na tom záleží vašim zákazníkům

Čtečky obrazovky čtou buňku spolu se záhlavím řádku a sloupce, například „Velikost L, pas: 84 cm“. Bez záhlaví slyší nevidomí zákazníci jen proud čísel a nepoznají, ke které velikosti nebo variantě které patří.

Koho se to týká

  • nevidomí zákazníci
  • uživatelé čteček obrazovky

Jak to opravit

Řádek záhlaví a také první sloupec, pokud pojmenovává řádky, označte značkou <th> místo <td> a doplňte scope="col" nebo scope="row". Řádek záhlaví vložte do <thead>. U složitých tabulek s více úrovněmi záhlaví použijte atributy id a headers. Pokud tabulka obsah jen vizuálně rozmísťuje, nahraďte ji rozvržením v CSS nebo doplňte role="presentation".

V Shopify

Obvykle tabulka velikostí nebo parametrů v popisu produktu nebo tabulka vytvořená aplikací. V zobrazení kódu editoru změňte buňky <td> prvního řádku na <th> nebo požádejte autora aplikace o vypisování buněk záhlaví.

V Shoptet (CZ)

Obvykle tabulka vložená do popisu produktu nebo článku. V zobrazení zdrojového kódu editoru změňte buňky prvního řádku na <th>.

V PrestaShop

Obvykle v popisu produktu, na stránce CMS nebo v modulu vlastností produktu. Změňte buňky záhlaví na <th> v zobrazení zdrojového kódu editoru nebo v šabloně .tpl modulu.

V WooCommerce

Obvykle plugin pro tabulky nebo HTML vložené do popisu produktu. Mnoho pluginů pro tabulky má volbu použít první řádek jako záhlaví; zapněte ji nebo opravte HTML tabulky.

Normy

Normy
NormaBod
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

Automatická kontrola: pravidlo axe-core td-has-header. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme