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:

<h3>Informace o rodičích</h3> <form> <label for="otec_jmeno">Jméno a příjmení otce</label><br /> <input type="text" id="otec_jmeno" name="otec_jmeno" size="30" /><br /> <label for="otec_misto">Místo narození otce</label><br /> <input type="text" id="otec_misto" name="otec_misto" size="30" /><br /> <label for="otec_rok">Rok narození otce</label><br /> <select id="otec_rok" name="otec_rok"> <option>1963</option> <option>1964</option> <option>1965</option> </select><br /> <input type="checkbox" id="otec_obcanstvi" name="otec_obcanstvi" /> <label for="otec_obcanstvi">České občanství otce</label><br /> <label for="matka_jmeno">Jméno a příjmení matky</label><br /> <input type="text" id="matka_jmeno" name="matka_jmeno" size="30" /><br /> <label for="matka_misto">Místo narození matky</label><br /> <input type="text" id="matka_misto" name="matka_misto" size="30" /><br /> <label for="matka_rok">Rok narození matky</label><br /> <select id="matka_rok" name="matka_rok"> <option>1963</option> <option>1964</option> <option>1965</option> </select><br /> <input type="checkbox" id="matka_obcanstvi" name="matka_obcanstvi" /> <label for="matka_obcanstvi">České občanství matky</label> <p><input type="submit" value="Odeslat" /></p> </form>

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:

Otec





Matka





Zdrojový kód po úpravě:

<form> <fieldset> <legend>Otec</legend> <label for="otec_jmeno">Jméno a příjmení</label><br /> <input type="text" id="otec_jmeno" name="otec_jmeno" size="30" /><br /> <label for="otec_misto">Místo narození</label><br /> <input type="text" id="otec_misto" name="otec_misto" size="30" /><br /> <label for="otec_rok">Rok narození</label><br /> <select id="otec_rok" name="otec_rok"> <option>1963</option> <option>1964</option> <option>1965</option> </select><br /> <input type="checkbox" id="otec_obcanstvi" name="otec_obcanstvi" /> <label for="otec_obcanstvi">České občanství</label> </fieldset> <fieldset> <legend>Matka</legend> <label for="matka_jmeno">Jméno a příjmení</label><br /> <input type="text" id="matka_jmeno" name="matka_jmeno" size="30" /><br /> <label for="matka_misto">Místo narození</label><br /> <input type="text" id="matka_misto" name="matka_misto" size="30" /><br /> <label for="matka_rok">Rok narození</label><br /> <select id="matka_rok" name="matka_rok"> <option>1963</option> <option>1964</option> <option>1965</option> </select><br /> <input type="checkbox" id="matka_obcanstvi" name="matka_obcanstvi" /> <label for="matka_obcanstvi">České občanství</label> </fieldset> <p><input type="submit" value="Odeslat" /></p> </form>

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ě:

Pobočky firmy

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:

Pobočky firmy

A zdrojový kód:

<form> <fieldset> <legend>Pobočky firmy</legend> <label for="vyber">Vyberte</label> <select id="vyber" name="vyber"> <option>---</option> <optgroup label="Česká republika"> <option>Brno</option> <option>České Budějovice</option> <option>Liberec</option> <option>Olomouc</option> <option>Ostrava</option> <option>Plzeň</option> <option>Praha</option> </optgroup> <optgroup label="Slovensko"> <option>Bratislava</option> <option>Kežmarok</option> <option>Košice</option> <option>Liptovský Mikuláš</option> <option>Zvolen</option> </optgroup> <optgroup label="Ostatní země"> <option>Berlín</option> <option>Moskva</option> <option>Salzburk</option> <option>Wien</option> <option>Wroclaw</option> </optgroup> </select> </fieldset> </form>

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ě:

  1. 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
  2. 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.
  3. Rozsáhlejší a komplikovanější formuláře rozdělujte do menších logických celků pomocí prvku <fieldset> a <legend>
  4. 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.
  5. 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í:
<input type="text" id="name" name="name" tabindex="1" /><br /> <input type="text" id="email" name="email" tabindex="2" />
  • 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.
<input type="text" name="prvni_pole" id="prvni_pole" accesskey="9" />

Více informací o ACCESSKEY naleznete na webu Dušana Janovského: Zvyšuje ACCESSKEY použitelnost?.