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:5015: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 atributsummary
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
Mohlo by vás také zajímat
-
Landing page: Jak vytvořit landing page s vysokým CTR
7. května 2024 -
Jak nainstalovat šablonu ve WordPressu
23. července 2024 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 2023
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024
Bubák
Říj 11, 2012 v 15:57Opera od verze 12 nepodporuje hlasový modul VoiceXML.
Nikdy jsem hlasový modul nezkoušel, ale co jsem se dočetl, tak podporoval jenom angličtinu.