Salt la conținut
Pandus

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

Standarde
StandardPunct
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

Toate regulile pe care le verificăm