Cerință WCAG A/AA Prioritate: Moderat · verificare experimentală: merită verificată manual
Tabelele mari au celule fără antete
Un tabel de date mai mare (peste 3 pe 3 celule), de exemplu un tabel de mărimi, de specificații sau de costuri de livrare, nu are celule de antet, așa că valorile nu sunt legate de ceea ce înseamnă.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Cititoarele de ecran citesc o celulă împreună cu antetele rândului și coloanei, de exemplu „Mărimea L, talie: 84 cm”. Fără antete, clienții nevăzători aud doar un șir de cifre și nu își dau seama cărei mărimi sau variante îi aparține fiecare.
Pe cine afectează
- clienți nevăzători
- utilizatori de cititoare de ecran
Cum se remediază
Marcați rândul de antet și, dacă denumește rândurile, prima coloană cu <th> în loc de <td> și adăugați scope="col" sau scope="row". Puneți rândul de antet în <thead>. Pentru tabele complexe cu mai multe niveluri de antete, folosiți atributele id și headers. Dacă tabelul doar aranjează vizual conținutul, înlocuiți-l cu un aspect CSS sau adăugați role="presentation".
În Shopify
De obicei un tabel de mărimi sau de specificații în descrierea produsului sau un tabel generat de o aplicație. În vizualizarea de cod a editorului schimbați celulele <td> din primul rând în <th> sau cereți dezvoltatorului aplicației să genereze celule de antet.
În Shoptet (CZ)
De obicei un tabel lipit în descrierea produsului sau într-un articol. În vizualizarea codului sursă din editor schimbați celulele din primul rând în <th>.
În PrestaShop
De obicei în descrierea produsului, într-o pagină CMS sau într-un modul de caracteristici ale produsului. Schimbați celulele de antet în <th> în vizualizarea codului sursă din editor sau în șablonul .tpl al modulului.
În WooCommerce
De obicei un plugin de tabele sau HTML lipit în descrierea produsului. Multe pluginuri de tabele au opțiunea de a folosi primul rând ca antet; activați-o sau corectați HTML-ul tabelului.
Standarde
| Standard | Punct |
|---|---|
| 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 |
Verificare automată: regula axe-core td-has-header.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Vizitatorii nu pot mări pagina pe mobil
WCAG 1.4.4 AA
-
Utilizatorii de tastatură nu pot ajunge la conținutul încorporat
WCAG 2.1.1 A
-
Videoclipurile nu au subtitrări
WCAG 1.2.2 A
-
Pagina folosește markup învechit pentru text care clipește
WCAG 2.2.2 A