Neviditelná struktura webu: nadpisy, seznamy a tlačítka bez jména

Úvod

Nedávno jsem dělal jeden z nejrozsáhlejších auditů přístupnosti za poslední dobu. Prošel jsem kompletně dva e-shopy a jeden prezentační web od stejného provozovatele a bylo to nakonec přibližně 61 stránek od úvodní stránky přes vyhledání a koupi zboží až po přihlášení a správu účtu, a sepsal jsem 483 jednotlivých nálezů. Číslo samo o sobě zní děsivě, ale realita je jiná a vlastně docela povzbudivá. Drtivá většina těch 483 chyb neznamená stejný počet různých problémů. Je to hlavně patnáct až dvacet pořád dokola se opakujících skupin chyb, které se jen objevují znovu a znovu na dalších a dalších stránkách, protože web vznikal postupně, po částech, a jednou vytvořená neúmyslná chyba se prostě zkopírovala i do dalších komponent.

To je vlastně dobrá zpráva. Neznamená to, že by bylo potřeba web předělat od nuly. Znamená to, že stačí najít opakující se vzory, opravit je jednou pořádně a propsat to všude, kde se stejná komponenta používá.

Všechny nálezy jsem si roztřídil do šestnácti opakujících se skupin a v tomhle seriálu si je projdeme jednu po druhé, seřazené od té nejčastější po nejvzácnější. Rovnou k tomu jedna poznámka. Řazení podle počtu výskytů je zajímavé samo o sobě, ale rozhodně to není totéž jako řazení podle důležitosti. Chyba, která se v tabulce objeví jen třikrát, může být pro konkrétního uživatele klidně zásadnější než chyba, která se opakuje padesátkrát. Tohle pořadí berte spíš jako zajímavost než jako návod, co opravovat dřív.

Ještě jedna poznámka k tomu, jak jsem nálezy počítal. Pokud se stejný typ problému objeví na různých místech webu (třeba jednou chybí hlavní oblast stránky a jinde zase patička), počítám to jako jeden a ten samý typ chyby, protože z pohledu uživatele jde skutečně o stejnou příčinu a stejné řešení, jen na jiném místě.

A na závěr si vysvětlíme, komu vlastně tyhle chyby vadí. Přístupnost webu se řeší kvůli lidem, kteří web neovládají myší a nevidí ho tak, jak ho vidíte vy na obrazovce. Nejčastěji jde o nevidomé a slabozraké uživatele, kteří si nechávají obsah stránky předčítat takzvaným čtecím programem (odečítačem obrazovky, anglicky screen readerem), a o uživatele, kteří z různých důvodů neovládají web myší, ale klávesnicí. Pro oba tyto typy uživatelů je web úplně jiné médium, než jak si ho představují běžní uživatelé internetu. Nevidí barevné tlačítko s ikonkou košíku. Slyší jen to, co jim web programově řekne. A pokud web neřekne nic, nebo řekne něco matoucího, uživatel se jednoduše ztratí.

1. Nadpisy, které nedávají smysl (59 nálezů ze 483)

Je to nejčastější problém v celém auditu, jen o jediný nález před druhým místem. Vidícímu člověku nadpis pomáhá opticky. protože tučnější nebo větší písmo může znamenat, že taková informace je asi důležitější než text, který tučný není. Uživatel odečítače ale nadpisy používá úplně jinak. Je to pro ně jhlavní navigační nástroj celé stránky. Umí si totiž nechat vyjmenovat všechny nadpisy na stránce najednou, jako obsah knihy, a rovnou skočit na ten, který ho zajímá, aniž by musel poslouchat všechno od začátku.

Aby to fungovalo, musí nadpisy dávat smysl jako hierarchie a jako nadpisy v knize: úroveň jedna pro hlavní nadpis stránky, pod ní úroveň dvě pro hlavní sekce, pod ní úroveň tři pro podsekce a tak dál, podobně jako osnova ve školní slohové práci. Na auditovaných webech se tahle osnova porušovala pořád dokola. Na některých stránkách úplně chyběl hlavní nadpis. Na jiných jich bylo naopak víc, klidně tři různé nadpisy nejvyšší úrovně na jedné stránce, takže se ztrácelo, co je vlastně to hlavní téma. Nejčastěji se ale objevovala nesprávná úroveň, text s jen o trochu větším písmem byl v kódu označkovaný jako nadpis třetí nebo čtvrté úrovně, aniž by nad ním byla odpovídající úroveň druhá, takže osnova dávala čtenáři asi tolik smyslu, jako kdyby v knize kapitola 4.2 najednou následovala po kapitole 1.

Další varianta stejného problému je použití nesprávné úrovně nadpisu v postraních menu nebo v patičce. I v těchto částech je občas potřeba nadpisy použít. Ale zde je doporučení používat nadpisy nejnižších úrovní, aby nenarušovaly nadpisy v hlavní části stránky. Toto pravidlo není zakotveno v oficiálních doporučeních, ale vychází z naší praxe.

2. Obsah, který se tváří jako jedna dlouhá nudle textu (58 nálezů ze 483)

Naprosto těsně druhý nejčastější typ připomínky. Jde o to, že spousta informací na webu je ve skutečnosti seznam, jenže v kódu stránky žádný seznam není. Je to jen řada textů a odkazů za sebou, opticky oddělených řádkováním a pseudoodrážkovými značkami, ale bez jakékoli programové sémantiky, která by řekla, že tohle je seznam pěti položek a teď začíná první z nich.

Typický příklad, stránka nabízí pět knih k rezervaci nebo pět druhů zboží, každý s vlastním názvem, cenou a tlačítkem Koupit. Vidící člověk to okamžitě rozpozná jako pět karet vedle sebe, díky barevným rámečkům a mezerám. Uživatel odečítače ale slyší jeden dlouhý, nepřerušovaný blok textu, název první položky, její cena, tlačítko "Koupit", název druhé položky, její cena, tlačítko "Koupit" a tak dál. Neví, kolik položek vlastně je, neví, kde jedna končí a druhá začíná, a nemá žádnou možnost říct si, ať mu web přeskočí rovnou na třetí položku. Stejný problém potkává seznamy dopravních spojení, výsledky vyhledávání, seznamy oblíbených míst, položky v košíku nebo výpis produktů.

Řešení je přitom triviální a vizuálně se vůbec nemusí nic změnit. Informace, které jsou logicky seznam, ať už karet, řádků, produktů nebo odkazů, se v kódu zabalí do značky seznamu a jeho položek. Uživatel odečítače pak při příchodu na stránku uslyší, že jde o seznam s pěti položkami, a může se pohybovat položku po položce. Grafický vzhled se nemusí hnout ani o pixel, protože vzhled seznamu se dá vypnout přes styly. Mění se jen to, co je pod kapotou.

3. Odkazy a tlačítka, které samy o sobě nic neřeknou (36 nálezů ze 483)

Tenhle vzor je zákeřný v tom, že na první pohled vypadá neškodně. Web je plný odkazů a tlačítek s texty jako "Detail", "Zobrazit", "Změnit", "Odstranit" nebo "více informací". Vidící člověk ví, co dělají, protože je vidí v kontextu, hned vedle konkrétní knihy nebo konkrétního produktu. Uživatel odečítače má ale často možnost nechat si vyjmenovat všechny odkazy nebo tlačítka na stránce najednou, podobně jako nadpisy, aby mohl rychle najít ten, který hledá. Jenže pokud je na stránce pět tlačítek "Odstranit" a všechna se jmenují úplně stejně, bez informace, co konkrétně mažou, je takový seznam k ničemu. Uživatel musí každý odkaz zvlášť dohledávat v jeho původním kontextu, poslouchat okolní text, a teprve tak zjistit, ke které položce vlastně patří. A ani to nemusí být jednoznačné. Z praxe mohu například zmínit různé e-shopy, které v seznamu karet produktů mají např. tlačítko pro označení produktu jako oblíbeného, ale uživatel nemá šanci zjistit, jestli se to konkrétní tlačítko vztahuje na zboží nad ním a nebo pod ním.

Řešení se dá shrnout do jedné věty. Text odkazu nebo tlačítka musí dávat smysl i úplně sám o sobě, vytržený z kontextu. Místo "Detail" tedy "Detail produktu Granule Hafík 15 kg". Místo "Odstranit" "Odstranit produkt Granule Hafík 15 kg". Viditelně přitom může na stránce zůstat pořád jen kratší "Detail" nebo "Odstranit" a ten delší popisný text stačí přidat jako doplňkovou, opticky neviditelnou informaci, kterou vidí jen odečítač.

4. Ikony a tlačítka, která nemají žádné jméno (35 nálezů ze 483)

Blízký příbuzný toho předchozího vzoru, ale ještě o kousek horší. Zatímco tlačítko "Detail" alespoň nějaké jméno má, jen nedostatečně popisné, tahle kategorie popisuje tlačítka a odkazy, které nemají jméno vůbec žádné. Typicky jde o čistě grafická tlačítka, ikonu lupy pro vyhledávání, ikonu košíku, ikonku plus a mínus u počtu kusů, zavírací křížek u dialogového okna, ikonu sdílení. Vidící uživatel pozná funkci z grafického znázornění ikony. Uživatel odečítače na takové tlačítko narazí a uslyší jen, že jde o tlačítko, bez jakékoli informace o tom, co dělá. V lepším případě aspoň pozná, že tam nějaké tlačítko je. V horším případě, pokud je tlačítko vytvořené technicky nesprávně, ho odečítač úplně přeskočí a uživatel netuší, že tam vůbec nějaká možnost byla.

Do stejné kategorie patří i grafiky, které mají popisek, ale nesmyslný, protože ho generoval systém automaticky z názvu souboru nebo z technického atributu, ne z toho, co grafika skutečně znázorňuje. Odečítač pak přečte anglické slovo tam, kde grafika znázorňuje třeba vlaječku jazykové verze, nebo přečte podivný textový řetězec, který vznikl jako vedlejší produkt kódu a nemá s obsahem stránky nic společného. Např. text "abxilkj345675.jpg" není vůbec popisný a ani se nedá odhadnout, co by takový prvek měl znázorňovat.

Oprava je jednoduchá. Tlačítko potřebuje textové jméno, které se vizuálně nemusí vůbec zobrazit, program pro odečítání ho ale přečte. U ikony lupy stačí "Vyhledat", u ikony košíku "Vložit do košíku", u zavíracího křížku "Zavřít dialogové okno". Žádný vizuální zásah, jen pár slov navíc v kódu. Jen krátké upozornění, jak jsme si ukázali v podkapitole výše, ani pouhé "Vložit do košíku" nemusí být dostatečné a je potřeba popisek rozšířit.

Co bude dál

V dalším díle se podíváme na formulářová pole bez popisků, na ilustrační grafiku, která zbytečně otravuje, a na stránky, kterým chybí hlavní oblast nebo patička.