Přejít k navigační liště

Zdroják » Webdesign » 15 cest k lepší přístupnosti vašeho webu – II

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

Články Webdesign

Ú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.

Komentáře

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Jakub Vrána

Chtěl bych se zeptat na jednu věc, se kterou si nevím rady. V textareách Admineru, do kterých se zadává kód, dovoluji pomocí JavaScriptu vložit tabulátor pouhým stisknutím klávesy Tab. Formulář lze následně odeslat pomocí Ctrl+Enter, což je alespoň v desktopových aplikacích celkem běžná konvence a navíc to je uvedeno v title odesílacího tlačítka.

Problém nastává v momentě, kdy chce uživatel přejít na nějaký další prvek a nemá myš. Napadá někoho, co by se s tím dalo udělat? Možnosti jednoduchého zadávání tabulátoru se kvůli tomu vzdát nechci.

Čelo

Co CTRL+Tab?

Jakub Vrána

To se používá pro přepínání panelů v prohlížeči.

Čelo

No a? :)

Jakub Vrána

Problém nastává, pokud je ten následující prvek tlačítko, protože to se po stisknutí accesskey rovnou „zmáčkne“. Muselo by se to tedy udělat také JavaScriptem.

David Grudl

Co třeba ESC? Vím, že to zní na první pohled hloupě, ale zkus si představit reálnou situaci, kde ti kurzor uvízl v textarea a _opustíš_ ji stiskem tlačítka _opustit_. Sice se předá fokus na další prvek, ale to je spíš implementační detail.

Jakub Vrána

Přijde mi to jako výborný nápad, asi to tak udělám. Teď jen vymyslet, jak se pomocí JS dá focusnout další element.

David Grudl

Funkce na to přímo není, ale s jQuery to lze relativně snadno (vím, že v Admineru není, ale třeba se to bude někomu hodit)

var inputs = $(‚:input‘);
inputs.eq(input­s.index(aktual­niElement) – inputs.length + 1).focus();

V prohlížečích s querySelectorAll() bych v cyklu nad querySelectorA­ll(‚input, select, button‘) hledal aktuální element a fokusnul následující/první. Pro IE 6 a 7 asi jedině pomalejším cyklem nad getElementsBy­TagName(‚*‘) a kontrolovat tagName.

Jakub Vrána

Formulář má kolekci elements, která se na to dá bezvadně použít, ale její procházení a hledání sebe sama mi přijde strašně krkolomné, takže hledám ještě něco elegantnějšího. Ale bohužel to asi nenajdu.

David Grudl

To sice má, ale focus by neměl kolovat jen mezi prvky jen jednoho formuláře.

Jakub Vrána

Já to zase tak obecně nepotřebuji. V Admineru po textaree následuje vždycky přinejmenším odesílací tlačítko.

Jakub Vrána

Sice se Esc v některých prohlížečích používá pro vrácení změn provedených v políčku, ale to je funkčnost asi celkem zbytečná, takže jsem to tak nakonec opravdu udělal. Díky za nápad!

Mimochodem pro „opustit“ by se nejvíc hodilo použít blur, ale to se chová divně ( Tab pak začíná od místa, kde naposledy skončil – tedy třeba od začátku).

František Kučera

V tvém případě jednoduché – přidat volbu do konfiguračního souboru – ať si uživatel vybere, jestli chce vkládat tabulátory nebo radši přeskakovat na další prvek*. Problém to může být spíš u veřejných webů, ale tam zase málokdy potřebuje uživatel vložit tabulátor.

*) nebo může mít obojí tím, že se použije nějaká jiná klávesová zkratka, ale ten tabulátor je buď a nebo.

PetrP

Adminer nemá konfigurační soubor.

Jakub Vrána

To je přesně řešení, kterému se chci za každou cenu vyhnout. Důsledkem totiž je, že přijdu k nějakému Admineru (třeba na webhostingu) a nevím, jak pracuje, nebo pracuje jinak, než chci.

Správné řešení musí fungovat všude stejně dobře.

OMG

Takové řešení často neexistuje — lidé mají různé preference, proto jsou programy konfigurovatelné ;-)

asdf

Chcel by som sa spytat, ze ci pri odkaze na dokument, ma byt jeho velkost typ sucastou samotneho odkazu? Priklad:
a, <a href=““>Dokument (PDF, 12MB)</a>
b, <a href=““>Dokumen­t</a> (PDF, 12MB)

Alebo nie, resp. ci to nahodou nie je jedno?

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.