Přístupné datové tabulky

Tabulky velikostí, technické parametry produktů, ceny dopravy, historie objednávek, srovnávací tabulky — e-shopy mají víc tabulek, než si myslí. Uživatelé čteček obrazovky procházejí tabulky buňku po buňce a u každé buňky slyší její záhlaví, ale jen pokud je záhlaví v kódu. Stránka je součástí série přístupné vzory UI.

Kdy tabulku použít

Tabulku použijte, když mají data vztah ve dvou rozměrech: řádky i sloupce něco znamenají (velikost × míra, země × cena dopravy). Nepoužívejte tabulky pro rozvržení a nestavte tabulková data z prvků div stylovaných jako mřížka.

Vzor tabulky v APG popisuje tabulku jako statickou strukturu, která „není interaktivní widget“, a říká: „autorům se důrazně doporučuje používat nativní prvek HTML table, kdykoli je to možné“. Pokud mnoho buněk obsahuje interaktivní widgety, může vzor grid z APG snížit počet zastávek tabulátoru — grid je ale složený widget s vlastním modelem ovládání šipkami a v e-shopu je potřeba jen zřídka.

Související kritéria WCAG

• 1.3.1 Informace a vztahy (A): buňky záhlaví a jejich datové buňky jsou propojené v kódu.
• 1.3.2 Smysluplné pořadí (A): pořadí čtení dává smysl i tehdy, když se tabulka čte lineárně.
• 1.4.10 Přizpůsobení obsahu (AA): W3C uvádí datové tabulky (ne jednotlivé buňky) jako obsah, který může potřebovat posouvání ve dvou směrech; zbytek stránky se musí přeskládat i tak.
• 2.1.1 Klávesnice (A): vodorovně posouvatelnou tabulku musí jít posouvat klávesnicí.
• 4.1.2 Název, role, hodnota (A): tlačítka řazení mají názvy a stav řazení je zpřístupněný.
• 2.4.6 Nadpisy a popisky (AA): titulky a záhlaví popisují obsah.

Příklad kódu

<!-- Jednoduchá tabulka: záhlaví v prvním řádku a prvním sloupci -->
<table>
  <caption>Tabulka velikostí dámských džínů v centimetrech</caption>
  <thead>
    <tr>
      <th>Velikost</th>
      <th>Pas</th>
      <th>Boky</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>

<!-- Řaditelný sloupec: tlačítko v záhlaví, aria-sort na buňce záhlaví -->
<th aria-sort="ascending">
  <button type="button">Cena</button>
</th>

<!-- Široká tabulka na malých obrazovkách: pojmenovaný posouvací kontejner, který může získat fokus -->
<div class="table-scroll" role="region" aria-label="Ceny dopravy" tabindex="0">
  <table>…</table>
</div>

Poznámky:

• Technika W3C H51 je „použití kódu tabulky k prezentaci tabulkových informací“. H63 se týká atributu scope (row, col, rowgroup, colgroup): je potřeba, když záhlaví není v prvním řádku nebo sloupci; u jednoduchých tabulek se záhlavím v prvním řádku nebo sloupci stačí obyčejné th. U složitých tabulek se záhlavím na několika úrovních používá H43 atributy id a headers.
• caption tabulku pojmenovává. Nenahrazujte ho tučným prvním řádkem ani nadpisem nad tabulkou, který s ní není propojený.
• Podle APG patří aria-sort na záhlaví seřazeného sloupce; nastavujte ho vždy jen u jednoho sloupce.
• Pokud se řádky načítají po stránkách nebo jsou virtualizované, sdělí aria-rowcount a aria-rowindex asistivním technologiím celkovou velikost.

Ovládání klávesnicí

APG uvádí ovládání klávesnicí u vzoru tabulky jako „nepoužije se“: tabulka není widget a její buňky nemohou získat fokus. Čtečky obrazovky mají vlastní příkazy pro procházení tabulek. Interaktivní prvky v buňkách — odkazy, tlačítka řazení, pole pro množství — jsou běžné zastávky tabulátoru.

Časté chyby v e-shopech

• Tabulky velikostí jako obrázky bez textové tabulky, nebo jako tabulky bez jediného th.
• Seznamy parametrů postavené z prvků div, které vypadají jako dva sloupce, ale nemají žádnou strukturu — použijte tabulku nebo seznam definic.
• Tabulky pro rozvržení ze starých šablon ve stylu e-mailů, označené pomocí th.
• Srovnávací tabulky se sloučenými buňkami záhlaví a bez atributů headers.
• Tučný první řádek místo caption nebo th.
• Široké tabulky, které na mobilu přetékají stránku, nebo posouvací kontejner, na který se uživatelé klávesnice nedostanou.
• Odkazy pro řazení bez stavu, takže uživatelé nevědí, jak je tabulka právě seřazená.

Co najde automatizovaná kontrola a co ruční testování

Všechna jsou kartami v naší knihovně pravidel. Ruční testování: u každé tabulky rozhodněte, zda jde o data, nebo o rozvržení, ověřte, že jsou záhlaví správná a smysluplná, projděte ji tabulkovými příkazy čtečky obrazovky a zkontrolujte ji na obrazovce široké 320 CSS pixelů.

Spusťte bezplatnou kontrolu jedné stránky na produktové stránce s tabulkou velikostí. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Jak udělat tabulku přístupnou?

Pro tabulková data použijte skutečnou tabulku HTML, buňky záhlaví označte prvkem th, přidejte scope tam, kde záhlaví není jednoduše v prvním řádku nebo sloupci, dejte tabulce titulek (caption) a nepoužívejte tabulky pro rozvržení.

Kdy potřebuji atribut scope?

Technika W3C H63 uvádí, že jednoduché tabulky se záhlavím v prvním řádku nebo sloupci fungují s obyčejnými prvky th; scope pomůže, když je záhlaví jinde. U složitých tabulek s víceúrovňovým záhlavím použijte atributy id a headers (H43).

Mám použít role="table", nebo role="grid"?

Dejte přednost nativnímu prvku table; APG ho všude, kde to jde, důrazně doporučuje. Grid je interaktivní složený widget s ovládáním šipkami, užitečný jen tehdy, když tabulka obsahuje mnoho interaktivních buněk.

Jak ukázat, podle kterého sloupce je tabulka seřazená?

Dejte aria-sort="ascending" nebo "descending" na záhlaví seřazeného sloupce a ovládací prvek řazení udělejte jako tlačítko uvnitř buňky záhlaví.

Dokáže automatizovaná kontrola otestovat tabulky?

Najde datové buňky bez záhlaví, záhlaví bez datových buněk, porušené atributy headers, neplatné hodnoty scope a falešné titulky. Nepozná, zda je tabulka opravdu datová a zda záhlaví dávají smysl.

Zdroje

• 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