HTML 5: Přístupné tabulky

Aktualizace článku Martina Snížka o webových tabulkách, vydaném před 10 lety v rámci seriálu Odstraňte bariéry svého webu.

Před deseti lety se Martin Snížek na Intervalu zabýval otázkou, jak co nejlépe zpřístupnit obsah tabulek nevizuálním interpretům. Jelikož se od té doby mnohé změnilo, nadešla chvíle učinit malou revizi dosavadních postupů.

Náhled do problematiky hlasových čteček

Pro nevizuální interpretaci webových stránek se používají hlasové čtečky (používá se také nespisovný název odečítače obrazovky, screen readers). To jsou programy, které uživateli zprostředkovávají přes zvukový výstup informace na obrazovce monitoru. Využívají je především nevidomí nebo těžce slabozrací uživatelé. Jejich občasnými uživateli se však mohou stát i lidé, kteří dlouhou pracovní dobu tráví u počítače, například úředníci nebo programátoři, a v pohodlí svého domova pak chtějí dopřát úlevu svým očím a páteři. Hlasové čtečky totiž umožňují brouzdat po Internetu vleže s klávesnicí na gauči.

Nejkvalitnější hlasovou čtečkou je JAWS. Jedná se však o komerční produkt, který lze zdarma používat jen zkušebně. Existují však také bezplatné hlasové čtečky – NVDA a pro linuxové operační systémy Orca, které využívají poměrně nekvalitní hlasový výstup eSpeak. Hlasovou čtečku lze mít i jako součást prohlížeče: v Google Chrome SpeakIt!, ve Firefoxu FoxVox, hlasový modul má i Opera.

Hlasové čtečky čtou obsah tabulky po řádcích, zleva doprava, buňku po buňce. Uživatel tedy nemá možnost okamžitého porovnání určitého údaje v jednom řádku s analogickým údajem na jiném řádku. Ani nemá vždy možnost přečíst si jméno aktuálního sloupce či řádku.

Základní struktura tabulek

U jednoduchých tabulek typu školního rozvrhu nebo různých ceníků není v zásadě co řešit. Stačí dodržovat správné vyznačování pomocí příslušných tagů.

<table>
 <caption>Náklady za roky 2009, 2010 a 2011 (v Kč)</caption>
 <thead>
  <tr><th>Náklady</th><th>2009</th><th>2010</th><th>2011</th></tr>
 </thead>
 <tfoot>
  <tr><th>Celkem</th><td>710 000</td><td>201 000</td><td>550 000</td></tr>
 </tfoot>
 <tbody>
  <tr><th>Mzdy</th><td>101 000</td><td>105 000</td><td>114 000</td></tr>
  <tr><th>Investice</th><td>531 000</td><td>5 000</td><td>332 000</td></tr>
  <tr><th>Provozní výdaje</th><td>78 000</td><td>91 000</td><td>104 000</td></tr>
 </tbody>
</table>

Takovou tabulku by měl každý interpret bez problémů zvládnout. Správné vyznačení tabulek je důležité mimo jiné z těchto důvodů:

• Hlasové čtečky čtou obsah tabulky po řádcích. Pokud tedy bude to, co významově patří do samostatných řádků, vypsáno do jednoho společného řádku – viz tato tabulka
  

  Místo	Příjezd	Odjezd	Číslo spoje
  Brno Praha Cheb	– 18:00 20:50	15:00 18:30 –	5612 5947 –

  – tak ve zvukovém výstupu bude obsah takové tabulky vypadat naprosto zmateně.

  Místo, Příjezd, Odjezd, Číslo spoje

  Brno Praha Cheb, – 18:00 20:50, 15:00 18:30 -, 5612 5947 –

• Přestože hlasové čtečky čtou obsah tabulky po řádcích, nemusí se uživatel nutně spoléhat jen na to, jak dobře si zapamatoval hlavičky sloupců, aby je mohl přiřadit k jednotlivým údajům. Pokročilejší hlasové čtečky dokážou hlásit hlavičky sloupců; takže pokud uživatel chce, může tuto funkci použít. Hodí se to zejména v případě, kdy má tabulka mnoho sloupců, a pamatovat si všechny hlavičky je takřka nemožné. Aby to ale fungovalo, musí být hlavičkové buňky (th) řádně vyznačeny! Sice JAWS v minulosti interpretoval pro jistotu každou první buňku řádku nebo sloupce jako hlavičkovou, ale poněvadž se to z určitých důvodů neosvědčilo, tak od verze 12 už vyznačování tabulek neopravuje.

Orientace v tabulkách

Níže popsané postupy jsou vhodné pro rozsáhlejší a z hlediska struktury komplikovanější tabulky.

Popis tabulky

Nevidomý čtenář není schopen si ještě před přečtením tabulky udělat představu o její povaze a celkovém uspořádání. To mu pak pochopitelně znesnadňuje orientaci v tabulce. Nemůže kupříkladu s přehledem a s rozmyslem přeskakovat řádky a aktivně přistupovat jen k těm údajům, které jsou předmětem jeho zájmu. Bez ponětí o obsahu a uspořádání tabulky je nevidomý uživatel postaven do role pasivního posluchače.

Takže co s tím? Kompenzační řešení by bylo nasnadě. Opatřit tabulku popisem. Existují dokonce různé sémantické varianty tohoto řešení. Jednou z nich je „zabalit“ tabulku do figure.

<figure>
 <figcaption>Magický čtverec</figcaption>
 <p>Čísla 1 až 9 jsou v tabulce seřazena tak, aby součet čísel v každém řádku, sloupci nebo úhlopříčce dával 15.</p>
 <table>
  <tr><td>4</td><td>9</td><td>2</td></tr>
  <tr><td>3</td><td>5</td><td>7</td></tr>
  <tr><td>8</td><td>1</td><td>6</td></tr>
 </table>
</figure>

Další variantou, která připadá v úvahu, je umístit popis tabulky do jejího titulku.

<table>
 <caption>
  <strong>Magický čtverec</strong>
  <p>Čísla 1 až 9 jsou v tabulce seřazena tak, aby součet čísel v každém řádku, sloupci nebo úhlopříčce dával 15.</p>
 </caption>
 <tr><td>4</td><td>9</td><td>2</td></tr>
 <tr><td>3</td><td>5</td><td>7</td></tr>
 <tr><td>8</td><td>1</td><td>6</td></tr>
</table>

Je také možné uvést popis tabulky v samostatném textu, a na ten pak v tabulce odkázat pomocí atributu aria-describedby.

<p id="popisek">Čísla 1 až 9 jsou v tabulce seřazena tak, aby součet čísel v každém řádku, sloupci nebo úhlopříčce dával 15.</p>
<table aria-describedby="popisek">
 <caption>Magický čtverec</caption>
 <tr><td>4</td><td>9</td><td>2</td></tr>
 <tr><td>3</td><td>5</td><td>7</td></tr>
 <tr><td>8</td><td>1</td><td>6</td></tr>
</table>

Pomocné atributy

V tabulkách se složitější strukturou je poměrně obtížné se bez vizuálního náhledu vyznat. Konkrétně není vždy jasné, které datové buňky (td) spadají pod kterou hlavičkovou buňku (th). Vše ještě komplikují buňky, které jsou roztaženy přes vícero řádků nebo sloupců. Existuje však řešení. Zásahem prozřetelnosti jsou od čtvrté verze součástí HTML atributy scope a header, které umožňují asociovat datové buňky s příslušnými hlavičkovými buňkami.

Díky atributu scope lze každé hlavičkové buňce přiřadit spádovou oblast – na výběr jsou hodnoty row, rowgroup, col (sloupec) a colgroup (skupina sloupců). Hodnoty colgroup a rowgroup lze ovšem vztáhnout jen na definovanou skupinu sloupců nebo řádků, jinak by jejich použití nemělo smysl. Skupina řádků se definuje jako hlavička (thead), patička (tfoot) nebo tělo (tbody) tabulky. Skupina sloupců se definuje pomocí tagu colgroup, který se umísťuje hned za nadpis (caption) tabulky. Počet sloupců ve skupině je buď vyjádřen číselnou hodnotou atributu span, nebo vypočítán podle vnořených tagů col.

Atribut header je přímočařejší nástroj. Explicitně přiřazuje k buňce hlavičkové buňky. Hodnotou atributu header jsou ID hlavičkových buněk oddělené mezerou.

Je otázkou, zda tyto atributy nejsou nadbytečné. Nejen kvůli tomu, že hlasové čtečky hlavičky řádků a sloupců automaticky nehlásí, ale hlavně by nemělo být nepřekonatelným problémem naprogramovat algoritmus, jenž by dokázal vyhodnotit strukturu tabulky a podle toho asociovat datové buňky s hlavičkovými automaticky. Nebylo by tohle řešení lepší, než se spoléhat, že se atributy scope a header budou důsledně používat? Je to samozřejmě jen řečnická otázka, doposud k tomuto řešení vývojáři hlasových čteček nepřistoupili, takže zatím oba zmíněné atributy nepochybně mají své opodstatnění.

Vyřazené atributy

V páté verzi HTML byly z tabulek odstraněny některé nevyhovující nebo nepoužívané atributy:

summary

Překonaný atribut tagu table. Text tohoto atributu byl určen jen pro hlasové čtečky, takže se nezobrazoval v prohlížečích, což nebylo vždy ideální. Doplňkový a vysvětlující text k tabulce může přece být užitečný každému, ne jen zrakově postiženým uživatelům. A navíc většina hlasových čteček atribut summary stejně opomíjí, zatímco viditelný text čte vždy.

axis

Účelem tohoto atributu bylo „štítkování“ buněk

abbr

Účelem tohoto atributu bylo poskytovat zkrácenou verzi obsahu buňky.

Význam Internetu pro zrakově postižené

Internet je čím dál více vnímán jako zdroj zábavy, stále však zůstává především zdrojem informací, který je mimořádně cenný zvláště pro lidi se zrakovým postižením. Ti totiž nemohou využít tradiční informační kanály – vizuální prezentace, tištěná média. O to je důležitější, aby obsah webové stránky byl přehledný a pochopitelný. Díky přístupným webovým stránkám jsou nevidomí spoluobčané schopni snáze překonávat svůj handicap, a dokonce sami být někomu nápomocni, o čemž svědčí i jedna trochu humorná historka.

Odkazy a zdroje

• Metodiky tvorby přístupných tabulek – SONS
• HTML5: tabular data – W3C
• Čtení tabulek hlasovou čtečkou – YouTube