Odstraňte bariéry svého webu – co nového po dvou letech

Od doby, kdy jste se na Intervalu setkávali s řadou článků o přístupnosti webu, uplynuly již dva roky. Od té doby se na tomto poli objevily některé nové postupy a také se ukázaly oblasti, kterým jsem se dostatečně nevěnoval. V následujícím textu proto projdu různá témata přístupnosti, a to podle zásady „každý pes, jiná ves“. Bude to něco jako doplňující poznámky k původním článkům – pokud jste je ještě nečetli, doporučuji vám tak učinit.

Mnoho poznámek vychází z Pravidel pro tvorbu přístupného webu, pomocí kterých se pravděpodobně v budoucnu bude kontrolovat přístupnost webů naší státní správy – tato pravidla jsou proto pro českého tvůrce webu nanejvýš relevantní.

Prohlášení o přístupnosti webu

Každý web by měl mít speciální stránku, kde se nachází prohlášení o přístupnosti webu a kontakt na jeho technického správce. Ono prohlášení by mělo říkat, jaké části webu jsou jak přístupné, případně jaká jsou omezení různých částí. Je zde možné uvést i metodiky přístupnosti (například WCAG, Blind Friendly Web nebo zmiňovaná česká pravidla přístupnosti), jejichž pravidla web splňuje, a webové standardy (například XHTML, CSS), které web dodržuje.

Pokud například máte web, jehož součástí je fotogalerie, text stránky s prohlášením, která musí být odkazována z každé stránky webu, by mohl vypadat takto:

V případě technických potíží se obraťte na správce webu:
Franta Dvořák (tel.: 606 546 852, e-mail: franta@example.com)
Tento web je plně přístupný všem uživatelům ve všech svých částech kromě fotogalerie – zde se nacházejí informačně nedostatečné popisky k jednotlivým fotkám.
Ve všech částech kromě fotogalerie jsou dodržena všechna pravidla metodiky WCAG.
Tento web také plně vyhovuje standardům jazyků XHTML a CSS.

Odkazy na nonHTML soubory musí být označeny

Pokud odkazujete na jiný soubor, než je webová stránka, musíte v odkazu uvést typ i velikost odkazovaného souboru. K tomu můžete využít text odkazu nebo atribut „title“ – osobně se mi ale zdá text odkazu lepší, protože uživatel vizuálního prohlížeče ne vždy čeká na zobrazení atributu „title“, než na odkaz klikne. Příklad:

Přečtěte si <a href=“casopis-ukazka.pdf“>ukázkové číslo našeho časopisu (formát PDF, 150&nbsp;kB)</a>.
nebo:
Přečtěte si <a href=“casopis-ukazka.pdf“ title=“formát PDF, 150&nbsp;kB“>ukázkové číslo našeho časopisu</a>.

Atribut „type“

Můžete použít i atribut „type“ a zazářit tak před ostatními kodéry:

Přečtěte si <a href=“casopis-ukazka.pdf“ type=“application/pdf“>ukázkové číslo našeho časopisu (formát PDF, 150 kB)</a>.

Tento atribut slouží k určení MIME-typu odkazovaného souboru. MIME-typy nejčastějších typů souborů odkazovaných na webu najdete v následující tabulce:

Nevím, jestli tento atribut dnes nějaké prohlížeče používají. I kdyby ho ale nepoužívaly, dá se využít v CSS – třeba k přidání ikonky ke každému odkazu, který vede na soubor PDF. Bohužel ale MSIE (bez speciálních extenzí) nepodporuje atributové selektory v CSS, takže můžete s tímto atributem opravdu většinou jen frajeřit.

Obsah řadit podle důležitosti

Obsah stránky by měl být v kódu uspořádán podle důležitosti. Nejprve nejdůležitější sdělení stránky, až potom navigace a ostatní informace. Před delšími bloky obsahu byste měli uvádět krátká shrnutí, to pomůže bez výjimky všem uživatelům.

Pokud musíte navigaci uvést ještě před hlavním obsahem (třeba kvůli vzhledu nebo manýrám vašeho publikačního systému), mělo by ji být možné přeskočit pomocí speciálního odkazu.

Skrývání obsahu ve vizuálních prohlížečích

Do kódu stránky je třeba často zařadit určitý obsah, který je významný pro strukturu stránky a pro nevizuální prohlížeče, ale při zobrazení stránky ve vizuálním prohlížeči ztrácí smysl (vše je jasné ze specifického zobrazení daných prvků) – například nadpis „Navigace“ nebo odkaz na přeskočení určitých úseků stránky. I tak by ale takový obsah měl být do kódu stránky zařazen, pouze při zobrazení stránky ve vizuálním prohlížeči by měl být skryt pomocí CSS.

Pravděpodobně byste toto skrytí realizovali pomocí vlastností display nebo visibility, ale v tom je kámen úrazu. Nevizuální hlasové čtečky jsou totiž často napojeny na běžný vizuální prohlížeč (třeba MSIE), kterému svěřují interpretaci stránky, samy se starají jen o čtení. A bohužel, pokud skryjete nějaký obsah pomocí display nebo visibility, čtečka ho ignoruje. Je tedy třeba používat jiný způsob, a sice absolutní pozicování mimo stránku:

#navigace h2 {
  position: absolute;
  top: -500px;
}

V tomto případě již hlasové čtečky přečtou obsah bez problémů. Je třeba jen dávat pozor na to, aby prvek, který takto skrýváte, nebyl uvnitř jiného pozicovaného prvku – pak by se jeho absolutní pozice počítala od pozice tohoto nadřazeného prvku.

Pozor na barvy

Už v původních článcích jsem mluvil o tom, že byste se při přenášení jakékoli informace neměli spoléhat pouze na barvu. Na webu se ale s porušením tohoto pravidla setkávám vcelku často.

První problém je u odkazů – určitě jste již mnohokrát slyšeli o tom, že tím, že je nepodtrhnete a zvýrazníte je jen barvou, se dopouštíte prohřešku proti použitelnosti. Jenže kromě toho zároveň necháváte přenos důležité informace – že je text odkazem – jen na barvě. A to je prohřešek proti pravidlům přístupnosti.

S dalším častým prohřeškem proti tomuto pravidlu se setkávám u formulářů. Vzpomeňte si, kolikrát jste už u nich viděli text „Povinné položky jsou označeny červeně.“ Správné označení je pomocí nějakého významového prvku (třeba <strong>) nebo hvězdičky.

Měli byste také dbát na dostatečný kontrast barev, typicky textu a jeho pozadí. K tomu můžete použít třeba měřidlo kontrastu na Sově v síti.

Nezávislost na vstupním zařízení

Web může být prohlížen na téměř libovolném zařízení, proto byste neměli počítat ani s konkrétním vstupním zařízením.

Časté jsou v tomto směru prohřešky hlavně u formulářů. Zde se lze setkat s texty jako „Zadejte své jméno a heslo a poté klikněte myší na OK“, případně „Zadejte slovo k vyhledání a stiskněte ENTER“. Tyto texty by se na webu buď neměli vůbec nacházet, a nebo by mělo být řečeno, pro jakou platformu jsou určeny (například pomocí CSS).

Problém podobného charakteru se vyskytuje i u nabídek tvořených prvkem <select>, kde se dá vybrat najednou více možností. Téměř pokaždé se zde mluví o klávese CTRL, kterou lze vybrat více položek. Správně by takový text měl vypadat třeba takto:

V nabídce můžete vybrat více položek najednou. Obvykle tak lze učinit pomocí funkční klávesy – na MS Windows použijte CTRL.

Jak používat accesskey

Atribut „accesskey“ umožňuje přiřadit určitý znak jako klávesovou zkratku pro konkrétní odkaz. Jeho použitím můžete urychlit pohyb po webu všem uživatelům, kteří nepoužívají myš. S tímto atributem jsou ale také spojeny určité problémy:

• Definované klávesové zkratky mohou kolidovat s klávesovými zkratkami v prohlížeči uživatele, což znemožní jejich použití.
• Pro klávesové zkratky neexistuje žádný standard, takže se uživatel musí na každém webu seznamovat s novými klávesami pro jednotlivé funkce a stránky.

Tyto problémy je možno částečně řešit tak, že se jako zkratky použijí čísla, takže zkratky nebudou kolidovat s nastavením prohlížeče. Některé organizace navíc navrhují standardní čísla pro různé stránky a funkce webu:

• 0 pro bližší informace o použití klávesových zkratek
• 1 pro odkaz na úvodní stránku
• 2 pro odkaz na přeskočení navigace
• 4 pro odkaz na vyhledávání

Další informace k tomuto tématu najdete na weblogu Víta Dlouhého v příspěvku Zvyšuje accesskey přístupnost stránek? Ano!.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.