15 cest k lepší přístupnosti vašeho webu – II

Disability

Úspěšnost implementace přístupnosti jde ruku v ruce s jednoduchostí a srozumitelností požadavků, které jsou na tvůrce webů kladeny. Dnes se podíváme na zbývajících osm jednoduchých požadavků na přístupnost, které patří mezi ty nejdůležitější, a na které byste se měli snažit myslet pokaždé, když tvoříte webovou stránku.

Předchozích sedm požadavků naleznete v prvním dílu tohoto článku.

8. Formulářovým prvkům přiřaďte relevantní popisky

Práce s formuláři (obzvlášť s těmi hůře přístupnými) patři mezi nejsložitější věci, na které může na webu uživatel s handicapem narazit. Snažte se proto, aby se s vašimi formuláři uživatelům pracovalo co nejpohodlněji, a při jejich tvorbě dodržte několik jednoduchých pravidel.

  1. U formulářových prvků definujte vazbu mezi prvkem a jeho popiskem pomocí vazebních atributů for a id, případně pomocí atributu title. 

  2. U složitějších formulářů použijte i značky fieldset a legend. Informaci o povinné položce zahrňte do popisku formulářového prvku (tzn. * či slovo povinné je součástí popisku proto, aby se tuto informaci uživatel dozvěděl současně s popiskem).

  3. Nezapomeňte na smysluplné chybové hlášky a nápovědné texty. Ty umístěte tak, aby byly pro uživatele co nejdostupnější, tzn. ideálně na začátek formuláře či bezprostředně k prvku, kterého se nápověda či chybová hláška týká.

  4. Formulář vždy opatřete standardním tlačítkem pro jeho odeslání.

Autor: Radek Pavlíček

Ukázka registračního formuláře na Seznam.cz

9. Tabulky vytvořte tak, že dávají smysl při čtení po řádcích a mají řádně vyznačena záhlaví řádků a sloupců

Práce s tabulkami patří mezi složitější úkony, které na uživatele na webových stránkách čekají. Zorientovat se v komplikované tabulce může být například pro uživatele screenreaderů docela problém, protože screenreadery prezentují informace lineárně, zatímco v tabulce jsou informace zobrazeny v 2D. Ale i tabulky lze vytvořit přístupně, pokud dodržíte následující pravidla:

  1. U tabulek dávejte do každé buňky pouze informace, které spolu logicky souvisí.

  2. U složitějších tabulek vyznačujte záhlaví řádku a sloupce značkou th, případně použijte id a headers pro vazbu buňky a jejích záhlaví. 

  3. Tabulky používejte k prezentaci křížově závislých dat, ne pro layout stránky.

Autor: Radek Pavlíček

I takto komplikovaná tabulka může být přístupná

10. Dokumenty dávejte na web i v přístupném formátu

Pokud na web umisťujete dokumenty ve formátu jiném než HTML, dbejte na to, aby byly pro uživatele přístupné (to, že je dokument například v pdf, ještě nemusí znamenat, že je přístupný). Ideálním řešením je nabídnutí stejného dokumentu v různých formátech tak, aby si uživatel mohl vybrat formát dokumentu dle svých potřeb a možností.

Autor: Radek Pavlíček

Ukázka možnosti stažení dokumentu v různých formátech na www.mlp-old.cz/bozena­nemcova

Další informace k tomuto tématu

  1. Přístupnost PDF dokumentů

  2. Jak vytvářet přístupné dokumenty ve Wordu 2007

11. Zajistěte, aby webová stránka byla ovladatelná z klávesnice

Celá řada uživatelů může ovládat web pouze z klávesnice. Proto je důležité, aby všechny prvky stránky, které mohou získat focus (t.j. ty, na které se lze dostat pomocí klávesy tabulátor), byly přístupné a ovladatelné z klávesnice. Zajistit přístupnost těchto prvků z klávesnice není vůbec složité – stačí používat standardní prvky HTML a nepoužívat například “falešné odkazy”, kdy se jedná pouze o odpovídajícím způsobem nastylovaný běžný text, na který je pomocí Javascriptu navázána určitá akce (přístupnost těchto situací řeší specifikace WAI-ARIA).

Kvůli usnadnění navigace v rámci stránky pomocí klávesnice je vhodné na logický začátek stránky umístit (vhodně skryté) odkazy pro rychlý přesun na hlavní/kontextové menu a hlavní obsah stránky.

Uživatelé, kteří ovládají web pouze pomocí klávesnice, také ocení dostatečné zvýraznění odkazu, který získá focus.

Autor: Radek Pavlíček

Při procházení webu nette.org je položka, která má focus, dostatečně zvýrazněna

Další informace k tomuto tématu

  1. WCAG 2.0 – Ovladatelnost a přístupnost z klávesnice

  2. Přístupnost RIA – strukturování dokumentu a přístupnost z klávesnice

  3. Zvýrazňujete odkazy při ovládání webu z klávesnice?

12. Méně je mnohdy více

Vymysleli jste pro svůj web novou funkci, kterou se na něj chystáte přidat? Předtím, než to uděláte, se zamyslete nad tím, zda je tato funkce pro uživatele opravdu přínosná a zda naopak nebude práci s webem uživatelům komplikovat. Čím je stránka komplexnější a čím více informací obsahuje, tím hůře se s ní uživatelům pracuje, protože jejich pozornost je od hlavního sdělení stránky odváděna jinam.

Také celá řada věcí, které tvůrci webu přidávají na své weby v domnění, že přístupnost zlepší, mají za následek přesný opak. Pokud máte na webu nedostatečně velké písmo, je mnohem snazší vyřešit problém zvětšením jeho výchozí velikosti než přidat na web funkci, umožňující sice zvětšování textu, která ale může být jen obtížně nalezitelná, neintuitivní a ve svém důsledku tedy žádné zlepšení přístupnosti nepřináší.

Soustřeďte se proto při tvorbě webu na to, aby každá stránka obsahovala jen to, co je opravdu nezbytné – “Dokonalosti není dosaženo tehdy, když už není co přidat, ale tehdy, když už nemůžete nic odebrat.”

Autor: Radek Pavlíček

Funkce pro zvětšení písma a změnu šířky stránky, umístěná na nevhodném místě, navíc odkazy na ně jsou vytvořeny formou piktogramů, jejichž význam není na první pohled jasný.

Další informace k tomuto tématu

  1. Nejzbytečnější věci na firemních stránkách

13. Texty odkazů jsou dostatečně výstižné

Řada uživatelů se seznamuje s obsahem webové stránky tak, že si ji začne procházet po odkazech. Text každého odkazu by proto měl být dostatečně výstižný a uživatel by z něj měl poznat, kam odkaz vede a co může na cílové stránce očekávat. Pokud není možné vyjádřit informaci o cíli odkazu pomocí textu odkazu, je potřebné ji umístit co nejblíže textu odkazu tak, aby ji uživatel mohl snadno dohledat.

Pokud odkaz vede na jiný typ dokumentu, než je HTML, je vhodné text odkazu doplnit o informaci o velikosti a typu cílového souboru.

Autor: Radek Pavlíček

Odkazy na pdf soubory jsou doplněny informací o typu a velikosti cílového souboru

14. Pište srozumitelně

S řadou technických aspektů přístupnosti si už dnes dokážou handicapovaní uživatelé poradit, protože asistivní technologie jsou dnes poměrně robustní programy a zvládnou leccos.  Pokud ale uživatel nerozumí informacím, které jsou na webové stránce prezentovány, pak mu ani sebelepší screenreader nepomůže. Pro to, aby čtenáři co nejlépe porozuměli tomu, co píšete, můžete udělat následující:

  1. Zaměřte se na stránce na jedno téma; soustřeďte se na ně a neodbíhejte k jiným.

  2. Pište principem obrácené pyramidy. Shrňte hlavní sdělení stránky v úvodním odstavci. Uživateli to pomůže rychle se zorientovat a zjistit, zda je na stránce opravdu to, co hledá. Snížíte tak riziko případného znechucení a frustrace.

  3. Vysvětlete zkratky, akronymy nebo technické výrazy. U komplikovanějších nebo technických textů nabídněte uživateli slovníček výrazů.

  4. Dbejte na pravopis a pište bez překlepů a chyb.

Další informace k tomuto tématu

  1. Pochopil by Einstein váš web?

15. Javascript či Flash už nemusí být problém – pokud je použijete s rozumem

Absolutní vyloučení Javascriptu či Flashe při tvorbě webu jako nepřístupných technologií už je dávno pasé a pokud se použijí s rozumem, je možné je na webu bez obav použít, aniž by nějak utrpěla jeho přístupnost. Naopak jsou případy, kdy může například vhodné použití Javascriptu přístupnost i zlepšit. Vzhledem k tomu, že vývoj (ne)přístupnosti těchto oblastí je poměrně dynamický, je vhodné zvolené řešení otestovat (či si nechat otestovat).

Další informace k tomuto tématu

  1. Přístupnost ovládacích prvků webových aplikací

  2. Flash už z hlediska přístupnosti nemusí být vždy problém

  3. Tajemství fokusu

Závěr

Pokud budete chtít dokázat, že lze vytvořit web, který vše výše uvedené splňuje, a přesto vykazuje problémy s přístupností, jistě se vám to podaří (a myslím, že poměrně snadno). Cílem tohoto článku nebylo sepsat “neprůstřelná” pravidla, ale poskytnout jednoduchý a srozumitelný návod všem, kteří chtějí pro přístupnost něco udělat a současně s ní nechtějí ztrácet mnoho času.

Zájemce o hlubší seznámení s tématikou přístupnosti odkazuji například na svůj seriál o WCAG 2.0, který vycházel zde na Zdrojáku, či blog POSLEPU, kde s kolegy o novinkách v oblasti přístupnosti pravidelně píšeme.

Radek vystudoval informatiku na Fakultě informatiky Masarykovy univerzity v Brně. Od roku 1998 se věnuje speciální informatice pro lidi s těžkým postižením zraku.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 19

Přehled komentářů

Jakub Vrána Tabulátor
Čelo Re: Tabulátor
Jakub Vrána Re: Tabulátor
Čelo Re: Tabulátor
Radek Pavlíček Re: Tabulátor
Jakub Vrána Re: Tabulátor
David Grudl Re: Tabulátor
Jakub Vrána Re: Tabulátor
David Grudl Re: Tabulátor
Jakub Vrána Re: Tabulátor
David Grudl Re: Tabulátor
Jakub Vrána Re: Tabulátor
Jakub Vrána Re: Tabulátor
František Kučera Re: Tabulátor
PetrP Re: Tabulátor
Jakub Vrána Re: Tabulátor
OMG Re: Tabulátor
asdf Typ a velkost ako sucast odkazu?
Radek Pavlíček Re: Typ a velkost ako sucast odkazu?
Zdroj: https://www.zdrojak.cz/?p=3443