Použitelné a přístupné webové formuláře
Formulář a tabulka
Lze použít tabulku?
Ale jistě. Je pravda, že nástup CSS donutil tvůrce webů opustit zažitý tabulkový layout, ale tabulka jako taková má své místo. Z principu je totiž každý formulář skupinou uspořádaných dvojic: návěstí + formulářový prvek. Což je struktura, která splňuje požadavky na tabulková data a není žádného důvodu neumístit takový formulář do tabulky. Návěstí většinou odpovídají záhlavím (<th>) a formulářové prvky buňkám tabulky (<td>).
Myslete lineárně
Pokud ale zvolíte jako základ pro vzhled formuláře tabulku, musíte myslet lineárně. Důvodem je fakt, že hlasové čtečky (to nejsou žádná sci-fi zařízení, ale software postavený většinou na jádře Internet Exploreru, který umí přečíst obsah stránky takříkajíc nahlas) přečtou obsah stránky tak, jak jsou texty a jiné prvky umístěny na webové stránce.
Příklad
Následující formulář je umístěn v tabulce:
Zdrojový kód pak vypadá takto:
Formulář je přehledný a díky tabulkové struktuře použitelný i při vypnutých stylech.
Obrázek - formulář v tabulce při vypnutých stylech
Ani hlasová čtečka nebude mít žádné problémy s interpretací, protože výstup dopadne asi takto:
- Jméno Editační pole
- Příjmení Editační pole
- Poznámka Editační víceřádkové pole
Doplněno 3. 6. 2010: Radek Pavlíček ve svém článku na serveru Zdroják.cz ovšem použití tabulky nedoporučuje.
Poznámky
Kupříkladu hlasová čtečka JAWS obsahuje takřečený formulářový mód, který je určen právě k tomu, aby postižený uživatel mohl lépe nakládat s webovým formulářem. Myslete ale na to, že každé takové zařízení interpretuje obsah stránky lineárně, čili tak, jak jsou informace seřazeny na stránce. Pro takové zařízení neexistuje vlevo ani vpravo. Většina z nich dokáže nejen přečíst holý text, ale v omezené míře umí rozpoznat i sémantické elementy (kupříkladu nadpisy, odstavce a tak podobně). Proto je poměrně důležité nezapomínat na sémantiku a pro jednotlivé prvky stránky používat k tomu určené elementy. Ale to je už trochu jiné téma.
Pro návěstí prvků bychom měli v HTML vždy používat předepsanou konstrukci:
Label je velmi užitečný prvek
Při zachování zásad přístupnosti lze takto snadno vyrobit elegantně vypadající formuláře. Pravdou ale je, že kód je zbytečné složitý a díky možnostem CSS je použití tabulky u takto jednoduchého formuláře vlastně zbytečné.
Všimněte si v kódu formuláře použité vazby <label for...> a faktu, že kliknutím na popisek se kurzor přemístí do odpovídajícího formulářového pole. To je velmi užitečné především u formulářů obsahujících spoustu přepínačů (radio) nebo zaškrtávacích tlačítek (checbox).
Právě <label> fungující jako návěští každého formulářového prvku je velmi důležitý, protože každá hlasová čtečka s ním umí velmi dobře nakládat. Není třeba připomínat, že návěští formulářového prvku by mělo být srozumitelné a jasné, a přesně vysvětlit uživateli, co má vlastně do formulářového pole vyplnit. Což samozřejmě souvisí i s použitelností formuláře jako takového.
V následujícím příkladu se tedy zkusíme obejít bez tabulky a ušetřit poměrně významnou část zbytečně použitého kódu.