margin-top: 125px; border: 1px solid gray; } -->

Přístupnost webu III: Jak na webové formuláře

Vladimír Kašpar , 31. leden 2012 11:00 2 komentářů
Přístupnost webu III: Jak na webové formuláře

Formuláře nejsou zrovna ty nejsnadnější prvky webu pro použití osobami se zdravotním postižením. Navigace je po stránce obsahové jedna věc, skákání mezi poli formuláře a vkládání informací je už věc druhá. Proto je důležité jim přidat pár základních HTML znaků pro jednodušší procházení formulářem a jednoduché odeslání. HTML kodéři tyto znaky berou většinou jako nutné zlo a víceméně se jim běžně vyhýbají. Pojďme se tedy podívat na to, jak by to mělo být vytvořeno správně.

Popisy jednotlivých polí

U formuláře jsou nejdůležitější popisy jednotlivých polí. A to z toho důvodu, že každý uživatel (běžný i nevidomý) by měl vědět, co přesně do kterého pole vepsat. Nejčastějším prohřeškem kodérů jsou samozřejmě chybějící popisy v HTML tagu „label“. Jsou nahrazovány tabulkou, jež má slepě dosazeny dva sloupce, kde v jednom je popisek pole a v druhém je samotné políčko. Správný přístupný a taktéž použitelný formulář nemá v žádném případě být tvořen tabulkou, ale jednoduchým soupisem:

Následně je důležité nastylovat pro běžné uživatele grafické zobrazení. K tomu můžeme použít jednoduše CSS styly. Zde je pro nastylování rozložení řada možností. Atribut „for“ z tagu „label“ je vázán na unikátní „id“ daného pole. Dalšími možnostmi jak zjednodušit nevidomým práci s formulářem jsou nepovinné atributy tagu “input”, a to “accesskey” a “tabindex”. Atribut “accesskey” nám určuje, jakým písmenem na klávesnici se můžeme rychle dostat k poli. A atribut “tabindex” využijeme tehdy, když chceme určit pořadí přeskakování mezi jednotlivými poli pomocí tabulátoru (klávesa “TAB”).

Popis části formuláře

Máme-li formulář, kde je více polí (např. objednávkový nebo registrační), je vhodné jej rozdělit do různých skupin. Ty nám určí, v jaké části formuláře se budeme při vyplňování nacházet. Rozdělení pomocí tagu „fieldset“ a popisem skupiny „legend“ je taktéž vhodné, například pokud se chceme v objednávkovém formuláři nejprve dozvědět, komu máme objednávku fakturovat (kdo ji zaplatí), a poté komu ji máme poslat. V tomto případě se nám mohou sejít políčka stejných názvů (jméno, příjmení) a nevidomý je opět ztracen, protože netuší, co do jakého pole vepsat. Ukázka:

Javascript pro nevidomé

Je obrovským mýtem, že hlasové syntetizátory (software pro čtení nevidomými) neumí vůbec javascript. To již dávno není pravdou. Většina hlasových syntetizátorů umí částečně vnímat javascript. Není proto třeba se vyhýbat javascriptové kontrole přímo při odesílání formuláře. Je třeba použít co nejvíce standartních funkcí jako je „alert“ pro vypsání chyby či „confirm“ pro potvrzování určité akce. Při kontrole správnosti formuláře nezapomínejme, že je důležité kontrolovat formulář jak na straně uživatele či prohlížeče, tak na straně serveru, protože touto dvojitou kontrolou je zajištěna kontrola i pro uživatele, již nemají zapnutý javascript.

Výborným „fíglem“ v přístupnosti je pak v javascriptu funkce „focus“, jež nám po načtení stránky nebo po záporném rozhodnutí kontroly formuláře přesune kurzor přímo do předem určeného pole.

Závěr

Snažme se tedy nevnímat mýty kolem přístupnosti webových formulářů, ale používejme standartní tagy, funkce či atributy, jež jsou základem webových technologií. Přístupnost webu není nijak specifická a složitá oblast, stačí pouze a jen dodržovat základní pravidla, která tyto technologie nabízejí a nevymýšlet v nich složitou zápletku.

Vladimír Kašpar

Vladimír Kašpar

Autor pracuje na pozici senior software developer ve firmě Effectix.com.


Komentáře

Jarda #1
Jarda 31. leden 2012 17:03

hodil by se nějaký příklad dokument s css a podobně ;-) tabulka je hezká v tom, že je snadná, každej jí vybuší z hlavy. V článku uvedený postup se mi líbí, ale nevím nevím, jak by to pak vypadalo.

Vladimír Kašpar #2
Vladimír Kašpar 02. únor 2012 21:47

Pokud chceme dosáhnout toho samého, co tabulka tak stačí pár "fíglů" v CSS a je to. V příkladu níže stačilo nastavit všemu blokový formát, všemu obtékání z prava (float:left) a u "label" obtékání vždy předtím vyčistíme, abychom ho dostali na nový řádek. Pak už jen malinký problém, že musíme nastavit u "label" pevnou šířku, aby nám pole nelétalo jak se mu zachce (přesněji dle délky textu v "label").

příklad:
<style>
label {display:block;clear:both;float:left;width:100px;}
input {display:block;float:left;}
</style>
<label for="jmenolbl">Jmeno</label>
<input id="jmenolbl" />
<label for="prijmenilbl">Prijmeni</label>
<input id="prijmenilbl" />

RSS 

Komentujeme

Virtuální realitou proti strachu ze smrti

Pavel Houser , 18. červenec 2017 07:00
Pavel Houser

Lidé, kteří reportují „zážitky blízké smrti“, pak mnohdy mají ze smrti menší strach. Nedalo by se to...

Více






Kalendář

22. 07.

27. 07.
Black Hat 2017
27. 07.

30. 07.
Defcon 2017
27. 08.

31. 08.
VMworld 2017
RSS 

Zprávičky

APMS varuje před nevyžádanými hovory ze zahraničních čísel

ČTK , 26. červenec 2017 08:00

Podvodníci tzv. wangiri organizují skrze alternativní či IP operátory, jimž je ukraden číselný rozsa...

Více 0 komentářů

Firmy se při přeshraničním prodeji přes Internet bojí podvodů

ČTK , 25. červenec 2017 16:27

Prodejci se obávají, že pokud lidé z jiného unijního státu za zboží nezaplatí, bude složité peníze v...

Více 0 komentářů

Zákazníci preferují biometrii, ale její zavádění je pomalé

Pavel Houser , 25. červenec 2017 12:50

Manažeři v bankách, kteří jsou zodpovědní za zavádění biometrie, připouštějí nedostatek zkušeností....

Více 1 komentářů

Starší zprávičky

Malware Stantinko napadl více než půl milionu uživatelů ve východní Evropě

Pavel Houser , 25. červenec 2017 10:36

Těžce identifikovatelný nový kmen malwaru se šíří prostřednictvím dvou plug-inů pro prohlížeč Chrome...

Více 0 komentářů

Čeští technici měli omylem přístup k tajným databázím Švédska

ČTK , 25. červenec 2017 10:23

Při předávce systémů švédský úřad nedodržel bezpečnostní postupy....

Více 1 komentářů

Zisk Googlu kvůli pokutě z EU klesl o 28 %

ČTK , 25. červenec 2017 10:16

Příjmy Googlu stouply o 20 % na 18,4 miliardy dolarů. Cena za proklik u Googlu klesla o 26 %. ...

Více 0 komentářů

Roboty využívá téměř čtvrtina českých menších firem

ČTK , 24. červenec 2017 10:00

Důvodem investic do robotizace nesmí být všeobecný trend, ale faktická potřeba. ...

Více 0 komentářů