Webové formuláře 2009 – co vyžadují? Použitelnost a přístupnost.

Jakkoli nám dnes do webových aplikací pronikají různé AJAXy, jQuery a SilverLighty – poctivým základem aplikace je ještě stále formulář. V pokračování předchozího článku se zaměříme na formuláře spolehlivé, použitelné a budeme dále rozšiřovat seznam požadavků, které máme od formulářů vyžadovat.

Použitelnost, přístupnost

Sémantika kódu

• K dispozici je formulářová trojice <fieldset>, <legend> a <label>.
• Pro definici vzhledu formuláře by se neměly zneužívat tabulky, odstavce, ani definiční seznamy.
• Značky <table>, <p> a <dl> by se měly používat pouze podle jejich sémantického významu.

Popisky prvků

• Každý prvek formuláře musí mít svůj textový popisek.
• Popisek je umístěn nalevo od prvku a je zarovnán doleva.
• Popisek k prvkům <input type="radio"> a <input type="checkbox"> může být umístěn i napravo od prvku.
• Popisek k prvku <textarea> může být umístěn i nad prvek.
• Korektní vazba mezi formulářovými prvky a jejich popisky pomocí  vazebních atributů for a id, zajistí identifikaci toho, k čemu formulářový prvek slouží.
• Title prvků má nést krátkou nápovědu k vyplnění.

Ovládání klávesnicí, tabindexy

• Formulář musí být ovladatelný i jen pomocí klávesnice.
• Žádný prvek formuláře nesmí přejímat focus bez interakce uživatele.
• Speciální políčka (např. email, adresa) mají být vybavena atributy vcard_name pro usnadnění vyplněníuživatelem.
• Prvky mohou být doplněny tabindexy, které jsou logické a intuitivní.
• Skupina prvků radio má vždy jeden z nich defaultně zaškrtnutý.

Odeslání formuláře klávesou Enter

• Obsahuje-li formulář pouze jediné odesílací tlačítko, pak odeslání formuláře klávesou Enter způsobí tutéž akci, jakoby bylo kliknuto na odesílací tlačítko.
• Obsahuje-li formulář více odesílacích tlačítek, pak při odeslání klávesou Enter může nastat jedna ze dvou akcí:
  • formulář nijak nereaguje, jeho stav zůstává nezměněn, jakoby nebyl odeslán
  • formulář se zachová, jakoby bylo stisknuto výchozí, nejčastěji používané a intiutivně vyznačené odesílací tlačítko

Úspěšné zpracování formuláře

• Po úspěšném zpracování formuláře je zobrazena zpráva o přijetí formuláře.
• K dispozici je též odkaz (tlačítko), které dává cestu, kam může uživatel dále pokračovat (např. „Návrat na hlavní stránku“, „Nový příkaz k úhradě“).

Grafická captcha

Ochrana formuláře pomocí grafické CAPTCHA je další velkou překážkou, na kterou může nevidomý uživatel narazit, proto je lepší se tomuto způsobu ochrany formulářů vyhnout.

"Inteligentní" formuláře

• Pole pro vyplnění e-mailové adresy má předvyplněný symbol @.
• Často udávané hodnoty ve výběrech jsou nastaveny jako označené, nebo jsou v seznamech uvedeny na začátku.
• Formulář přijme a automaticky zpracuje údaje v různých formátech (např. datum: 1.4.2009, 1/4/2009, 01/04/09, telefonní číslo: +420 603 603 603, 603 603 603, 603-603-603 apod.)
• Délka vstupních hodnot prvku je omezena na maximální povolenou velikost.

Seskupování položek

• Rozsáhlejší a komplikovanější formuláře rozdělujte
  • do menších logických celků pomocí prvku <fieldset> a <legend>
  • případně rozhodněte o řešení pomocí více stránek – wizardu

Rozbalovací seznamy

Dlouhé a nepřehledné rozbalovací seznamy s mnoha položkami rozdělte do menších logických celků pomocí značky <optgroup> s atributem label.

Průvodce – wizard

Jedná se o formulář, který obsahuje více než jednu stránku.

• stránky mají mít označeny jednotlivé kroky a v průběhu vyplňování uživatele informují v kterém kroku (na kolikáté stránce formuláře) se nachází a kolik mu jich ještě zbývá.
• musí obsahovat navigaci vpřed, zpět
• nesmí jít odeslat před vyplněním/projitím všech stránek
• při procházení vpřed a zpět si pamatuje již vyplněný obsah, mimo případ, kdy změna v předchozím kroku způsobí změnu flow wizardu nebo má dopad na validitu položek

V dalším pokračování článku dokončíme požadavky z ošetřování chyb. Také v tomto článku jsem se snažil co nejvíce postihnout problematiku současných formulářových aplikací, ale tuším, že i tak se mi nepodařilo postihnout úplně všechno. Budu rád, když chybějící připíšete do komentářů

Použité odkazy

Metodika WCAG 2.0
http://www.blindfriendly.cz/wcag20/

Kontrolní seznam pro WCAG 2.0
http://www.blindfriendly.cz/wcag20checklist/

Screen readery a sémantika
http://poslepu.blogspot.com/2008/02/screen-readery-semantika.html

XHTML – struktura formulářů
http://interval.cz/clanky/xhtml-struktura-formularu

Profil uživatele a autocomplete
http://interval.cz/clanky/profil-uzivatele-a-autocomplete-prakticke-vyuziti/

VCARD_NAME Attribute
http://msdn.microsoft.com/en-us/library/ms535130(VS.85).aspx