Použitelné a přístupné webové formuláře
Praktická ukázka tvorby webového formuláře
Formulář před úpravou
Prohlédněte si následující webový formulář a jeho zdrojový kód. Splňuje sice základní zásady přístupnosti, ale uznáte sami, že není příliš přehledný. Především vám jistě neujde, že samotný formulář má dvě logické části - jedna se týká údajů o otci, druhá má stejné položky, ale týká se matky. Dohromady dává celý formulář dojem nepřehledného celku a navíc musíme u každé formulářové položky uvést, jedná-li se o údaje o otci nebo o matce.
Informace o rodičích
Zdrojový kód vypadá takto:
Informace o rodičích
Formulář po úpravě
A nyní zkusme aplikovat zásady, o kterých byla řeč. Použijme <fieldset> k logickému rozčlenění formuláře a párovou značku <legend>, ve které uvedeme nadpis dané části. Při použití jednoduchého formátování pomocí CSS dostaneme tento výsledek:
Zdrojový kód po úpravě:
Komu jsme pomohli
Uznáte sami, že konečný výsledek je o mnoho přehlednější a snadno pochopitelný pro každého uživatele. Velmi jsme ale touto drobnou úpravou pomohli uživatelům handicepovaným (především těm, kteří trpí poruchami učení a soustředění).
Významné zlepšení ale pocítí i zrakově postižení uživatelé, kteří používají hlasové čtečky. Již zmíněná čtečka JAWS tento změněný formulář přečte takto:
- Otec Jméno a příjmení Editační pole
- Otec Místo narození Editační pole
- Otec Rok narození Rozbalovací seznam 1 z 2
- Otec České občanství Zaškrtávací tlačítko
- Matka Jméno a příjmení Editační pole
- Matka Místo narození Editační pole
- Matka Rok narození Rozbalovací seznam 1 z 2
- Matka České občanství Zaškrtávací tlačítko
Musíte sami uznat, že minimální námaha (vložení dvou prvků navíc do kódu formuláře) může pomoci všem uživatelům bez rozdílu. Těm zdravým nabídne přehledný a snadno použitelný formulář a těm postiženým neklade žádné překážky k jeho použití.
Členění rozbalovacích seznamů
Pro úplnost si ještě ukážeme, jak zpřehlednit dlouhý rozbalovací seznam, který bývá standardní výbavou formulářů. Tvůrci webů si neuvědomují, že orientace v rozbalovací nabídce, která obsahuje desítky položek, je velmi obtížná a někdy až nemožná. To v případě, kdy se tvůrce ani nenamáhá setřídit položky alespoň podle abecedy.
Pro zpřehlednění rozbalovacích nabídek <select> poslouží párová značka <optgroup>, jejímž jediným účelem je z výběrového seznamu učinit lepší místo pro život.
Ukažme si to na příkladě:
Obsah seznamu není příliš dlouhý, ale už teď vidíte, že není jednoduché se v něm snadno orientovat. Nemáte žádný záchytný bod a musíte si prostě celou nabídku přečíst, než najdete správné město.
Zkusme tento seznam trochu zpřehlednit, moc práce to nedá. Přidáme párovou značku <optgroup> s atributem label, který bude obsahovat název dané skupiny. A pro zlepšení orientace ještě setřídíme seznam podle abecedy. Výsledek:
A zdrojový kód:
Závěrečné shrnutí
Protože bez formulářů se dnes neobejde žádný web, je dobré znát těchto pár zásad, kterými zajistíte, že webový formulář určený k interakci provozovatele webu s uživatelem bude plnit svůj účel bez ohledu na to, zda jej používá zdravý návštěvník vybavený nejmodernějším grafickým prohlížečem, nebo zdravotně či jinak postižený jedinec. Zásady jsou přitom velmi jednoduché a nevyžadují žádnou velkou práci navíc.
Shrňme si je přehledně:
- Není-li to nezbytně nutné, nepoužívejte pro definici vzhledu formuláře tabulky, odstavce, ani definiční seznam. Máte k dispozici svatou formulářovou trojici <fieldset>, <legend> a <label>, která v drtivé většině případů splní vaše požadavky
- Každý formulářový prvek vybavte popisem, který informuje návštěvníka o tom, jak má s daným formulářovým prvkem zacházet. Využijte značky <label> a pomocí atributů for a id ji svažte s odpovídajícím formulářovým polem.
- Rozsáhlejší a komplikovanější formuláře rozdělujte do menších logických celků pomocí prvku <fieldset> a <legend>
- Dlouhé a nepřehledné rozbalovací seznamy s mnoha položkami také rozdělte do menších logických celků pomocí značky <optgroup> s atributem label.
- Musíte-li použít skutečně dlouhý a komplikovaný formulář, rozdělte ho raději na několik částí. Viz ukázkový příklad.
Něco navíc
- Pro lepší ovládání formuláře určené především uživatelům, kteří z jakéhokoliv důvodu nemohou pracovat s myší, zvažte možnost využití TABINDEX. Ten zajistí, že přechod od jednoho formulářového ke druhému pomocí klávesy TAB (typicky) bude snadný a logický, to jest ve správném pořadí:
- Také využití ACCESSKEY je užitečné, byť se zatím moc nerozšířilo. Nicméně, své použití najde, je jenom nutné oznámit předem uživateli, jakou klávesovou zkratkou se dostane do prvního políčka formuláře.
Více informací o ACCESSKEY naleznete na webu Dušana Janovského: Zvyšuje ACCESSKEY použitelnost?.