Tabele de date accesibile

Tabele de mărimi, specificații de produs, tarife de livrare, istoricul comenzilor, tabele comparative — magazinele au mai multe tabele decât cred. Utilizatorii de cititoare de ecran navighează prin tabele celulă cu celulă și aud antetul fiecărei celule, dar numai dacă antetele există în cod. Această pagină face parte din seria modele de interfață accesibile.

Când folosiți un tabel

Folosiți un tabel când datele au o relație în două dimensiuni: rânduri și coloane care au amândouă sens (mărime × măsură, țară × cost de livrare). Nu folosiți tabele pentru machetare și nu construiți date tabelare din elemente div stilizate ca grilă.

Modelul de tabel APG descrie un tabel ca o structură statică ce „nu este un widget interactiv” și spune: „autorii sunt încurajați insistent să folosească un element HTML nativ table ori de câte ori este posibil.” Dacă multe celule conțin widgeturi interactive, modelul grid din APG poate reduce numărul de opriri Tab — dar un grid este un widget compus, cu propriul model de navigare din săgeți, și rareori este necesar într-un magazin.

Criterii WCAG relevante

• 1.3.1 Informații și relații (A): celulele de antet și celulele lor de date sunt legate în cod.
• 1.3.2 Secvență cu sens (A): ordinea de citire are sens când tabelul este liniarizat.
• 1.4.10 Reflow (AA): W3C numește tabelele de date (nu celulele individuale) printre conținuturile care pot avea nevoie de derulare în două dimensiuni; restul paginii trebuie totuși să se readapteze.
• 2.1.1 Tastatură (A): un tabel cu derulare orizontală trebuie să poată fi derulat de la tastatură.
• 4.1.2 Nume, rol, valoare (A): butoanele de sortare au nume, iar starea sortării este expusă.
• 2.4.6 Titluri și etichete (AA): caption-urile și antetele descriu conținutul.

Exemplu de cod

<!-- Tabel simplu: antete în primul rând și în prima coloană -->
<table>
  <caption>Tabel de mărimi pentru blugi de damă, în centimetri</caption>
  <thead>
    <tr>
      <th>Mărime</th>
      <th>Talie</th>
      <th>Șold</th>
    </tr>
  </thead>
  <tbody>
    <tr><th>S</th><td>66–70</td><td>92–96</td></tr>
    <tr><th>M</th><td>71–75</td><td>97–101</td></tr>
  </tbody>
</table>

<!-- Coloană sortabilă: un buton în antet, aria-sort pe celula de antet -->
<th aria-sort="ascending">
  <button type="button">Preț</button>
</th>

<!-- Tabel lat pe ecrane mici: container de derulare focalizabil, cu nume -->
<div class="table-scroll" role="region" aria-label="Tarife de livrare" tabindex="0">
  <table>…</table>
</div>

Observații:

• Tehnica W3C H51 înseamnă „folosirea marcajului de tabel pentru a prezenta informații tabelare”. H63 acoperă scope (row, col, rowgroup, colgroup): necesar când antetele nu sunt în primul rând sau în prima coloană; pentru tabele simple cu antete în primul rând sau în prima coloană ajunge th simplu. Pentru tabele complexe cu antete pe mai multe niveluri, H43 folosește id și headers.
• caption dă nume tabelului. Nu îl imitați cu un prim rând îngroșat sau cu un titlu deasupra, nelegat de tabel.
• Conform APG, aria-sort se pune pe antetul coloanei sortate; setați-l pe o singură coloană odată.
• Dacă rândurile se încarcă pe pagini sau sunt virtualizate, aria-rowcount și aria-rowindex comunică tehnologiilor asistive dimensiunea completă.

Interacțiunea cu tastatura

APG listează interacțiunea cu tastatura pentru modelul de tabel ca „nu se aplică”: un tabel nu este un widget, iar celulele sale nu sunt focalizabile. Cititoarele de ecran au propriile comenzi de navigare în tabele. Elementele interactive din celule — linkuri, butoane de sortare, câmpuri de cantitate — sunt opriri Tab obișnuite.

Greșeli frecvente în magazinele online

• Tabele de mărimi ca imagini fără tabel text, sau tabele fără niciun th.
• Liste de specificații construite din elemente div care arată ca două coloane, dar nu au structură — folosiți un tabel sau o listă de descrieri.
• Tabele de machetare din șabloane vechi în stil e-mail, marcate cu th.
• Tabele comparative cu celule de antet îmbinate și fără atribute headers.
• Un prim rând îngroșat în loc de caption sau th.
• Tabele late care depășesc pagina pe mobil, sau un container de derulare la care utilizatorii de tastatură nu pot ajunge.
• Linkuri de sortare fără stare, așa că utilizatorii nu știu ordinea curentă.

Ce găsesc verificările automate și ce rămâne pentru testarea manuală

Toate sunt carduri în biblioteca noastră de reguli. Testare manuală: decideți dacă fiecare tabel conține date sau servește la machetare, verificați că antetele sunt corecte și au sens, navigați cu comenzile de tabel ale unui cititor de ecran și verificați tabelul pe un ecran lat de 320 de pixeli CSS.

Rulați verificarea gratuită a unei pagini pe o pagină de produs cu tabel de mărimi. Este o verificare automată, nu un audit complet.

Întrebări frecvente

Cum fac un tabel accesibil?

Folosiți un tabel HTML real pentru datele tabelare, marcați celulele de antet cu th, adăugați scope acolo unde antetele nu sunt pur și simplu în primul rând sau în prima coloană, dați tabelului un caption și nu folosiți tabele pentru machetare.

Când am nevoie de atributul scope?

Tehnica W3C H63 spune că tabelele simple, cu antete în primul rând sau în prima coloană, funcționează cu elemente th simple; scope ajută când antetele sunt în altă parte. Pentru tabele complexe cu antete pe mai multe niveluri, folosiți atributele id și headers (H43).

Folosesc role="table" sau role="grid"?

Preferați elementul nativ table; APG îl recomandă insistent ori de câte ori este posibil. Un grid este un widget compus interactiv, cu navigare din tastele săgeți, util doar când un tabel conține multe celule interactive.

Cum arăt după ce coloană este sortat tabelul?

Puneți aria-sort="ascending" sau "descending" pe antetul coloanei sortate și faceți din controlul de sortare un buton în interiorul celulei de antet.

Poate o verificare automată să testeze tabelele?

Găsește celule de date fără antet, antete fără celule de date, atribute headers greșite, valori scope invalide și caption-uri false. Nu poate spune dacă un tabel este cu adevărat un tabel de date sau dacă antetele au sens.

Surse

• W3C WAI, APG Table pattern: https://www.w3.org/WAI/ARIA/apg/patterns/table/
• W3C, Technique H63 Using the scope attribute: https://www.w3.org/WAI/WCAG22/Techniques/html/H63
• W3C WAI, APG Grid pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html