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:

<form> <table> <tr> <th> <label for="jmeno">Jméno:</label> </th> <td> <input type="text" size="20" id="jmeno" name="jmeno"> </td> </tr> <tr> <th> <label for="prijmeni">Příjmení:</label> </th> <td> <input type="text" size="20" id="prijmeni" name="prijmeni"> </td> </tr> <tr> <th class="comment"> <label for="poznamka">Poznámka:</label> </th> <td> <textarea id="poznamka" name="poznamka" cols="20" rows="5"></textarea> </td> </tr> </table> </form>

Formulář je přehledný a díky tabulkové struktuře použitelný i při vypnutých stylech.

Formulář v tabulce 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 for="id_prvku">Návěstí:</label> <prvek id="id_prvku" … >

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.