Nahoru
 

Bezbariérové stránky

Ne všichni mají to štěstí patřit do prémiového klubu plně zdravých jedinců. Někteří z nás trpí postiženími. Může se jednat o maličkosti jako potřebu nosit brýle nebo závažnější případy, zahrnující slepotu, amputace, či hluchotu. Takovým lidem chceme pomoci. Předěláváme svět tak, aby byl bezbariérový. V době novodobé éry internetu bychom měli vědět, jak vlastně vytvořit bezbariérový web a umožnit tak získávání informací úplně každému.

Někdo by si hned mohl říci „proč bych měl dělat web bezbariérový pro pár jedinců?“. To je dobrá otázka. Je na ní velice jednoduchá odpověď. Pokud pomineme humanitární stránku věci, tak i postižený návštěvník je potencionální zákazník. Například, pokud špatně zvolíte barevnou paletu a barvoslepí lidé správně neuvidí obsah, můžete ztratit až 2.7 % veškerého provozu.

Jak vytvořit bezbariérový web pro všechny

Koho považujeme za „nejvíce postiženého“ jedince, který může navštívit vaše stránky? Pro koho se vyplatí připravit správný bezbariérový web? Je to robot! Robot (a přístroje) pro spoustu postižených tvoří komunikační most. Robot však nic neslyší, nevidí, a kontextu rozumí velmi omezeně. Pokud vaše stránky nevytvoříte tzv. „Robot friendly“, tak kromě ztráty veškeré SEO, znemožníte možnost návštěvy hromady potencionálních návštěvníků.

Jako perfektní příklad si můžeme uvést Braillovu čtečku. Jedná se o čtečku, jež pro slepé jedince poskytuje možnost čtení „virtuálního písma“. Když uživatel dorazí na nevhodně tvořený web, tak robot ve čtečce nemá tušení, kde začít. Čtenáři může říkat nějaké nesmysli ohledně cookies, načež začne vykládat náhodná telefonní čísla, emaily a jazyky. Kdybychom však čtečce pomohli a označili jí kde se nachází menu, hlavička, patička, obsah, text, obrázky, kam směřují odkazy a nesčetně dalších metainformací, čtečka by byla mnohem chytřejší. Čtenáři by tak donesla relevantní informace a pro robota, tudíž i pro čtenáře, je to daleko srozumitelnější.

Čtečka Braillova písma
Obrázek č. 1: Čtečka Braillova písma

Pokud je stránka srozumitelná pro robota, teoreticky je i pro všechny

Příklady bezbariérových nutností

Věcí, které pro opravdový bezbariérový a přístupný existují, najdeme obrovskou spoustu. Skoro bych ani nevěděl, kde začít. Pokusím se pro vás shrnout názorné a důležité příklady, které jako vývojář nebo uživatel můžete vnímat automaticky nebo o nich vůbec netušíte.

  • Odkazy je nutné označit slovy, ze kterých se dá odvodit, kam směřují. Za absolutně vyloučené obraty považujeme slova jako „zde“, „odkaz“ nebo „link“. Z toho totiž robot netuší, kam odkaz směřuje a kontextu moc nerozumí. Pokud odkaz směřuje na kontaktní formulář, odkaz by měl mít text, blížící se slovům „kontaktní formulář“.
  • Odkazy by měly mít atribut „Title“, který popisuje cíl. Můžeme pro odkaz uvést i metadata, zda odkazují na soubor, web nebo něco jiného.
  • Obrázky by vždy měli mít atribut „Alt“, což je alternativní text, sloužící v případě neschopnosti zobrazit nebo shlédnout obrázek. Jedná se o ideální alternativu pro roboty nebo slepce. Atribut „Alt“ by měl vystihovat obsah obrázku. Pro obrázky můžeme vyplnit i atribut „Title“, stejně jako u odkazu.
  • Každá stránka i podstránka by měla mít unikátní meta informace „Description“ (popis) i „Keywords“ (klíčová slova). Tyto meta tagy shrnují obsah stránky.
  • Každá podstránka by měla mít výstižní „Title“ tag. Tento tag se zobrazuje v názvu panelu a hojně ho využívají i roboti.
  • Stránka by měla mít označenou hlavičku, patičku a navigační sekci pro lepší orientaci robotů.
  • Každý web by měl mít soubor sitemap.xml, což je dokument popisující strukturu celého webu. Vhodné je mít i robots.txt, jež naviguje roboty, kam by měli a neměli chodit.
  • Každá stránka by měla mít vhodnou strukturu nadpisů. Ideální je jeden nadpis první úrovně a minimálně dva podnadpisy druhé úrovně.
  • Měli bychom správně značit různé elementy na stránce. Pokud máme odstavec textu, musíme ho označit jako odstavec textu. To samé platí pro seznamy, nadpisy, či obrázky. Za každou cenu nesmíme při tvorbě HTML (značkovacího kódu) hledět na styl nebo design. Ten se tvoří až posléze.
  • Nedůležité znaky, jako například oddělovače do drobečkové navigace, nepatří do HTML. Vkládají se do pseudoelementů, jež slouží čistě pro designové vylepšení.
  • Efekty typu „hover“ (efekt na přejetí myši) nikdy neslouží pro zobrazování nebo spouštění důležitých věcí či textů. Například mobily ani televize kurzory nemají, proto nemohou přejetí myši spustit.
  • Každé video by mělo mít titulky. Roboti i hluší lidé tak daleko lépe rozumí obsahu. Za poznámku stojí i to, že návštěvník vždy nemusí mít možnost pustit si zvuk.
Elementární chyba při psaní odkazů je nic neříkající informace, jako „zde“, „odkaz“ nebo „link“
Obrázek č. 2: Elementární chyba při psaní odkazů je nic neříkající informace, jako „zde“, „odkaz“ nebo „link“

Jedná se o relativně krátký seznam, avšak chtěl jsem pouze naznačit, jak by se mělo k tvorbě webů přistupovat.

Přístupnost většinou nebývá prioritou pro vývojáře, avšak měla by. Nejenom že ztrácí spoustu potencionálních návštěvníků, ale i znepříjemňují život těm současným. Bohužel, musí se počítat s grafickými i funkcionálními kompromisy. Výsledek však stojí za to.