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

28. července 2009

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

Další článek Hotová řešení pro CSS
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. Ondrej Valka

    Čvc 29, 2009 v 13:22

    Doplnim odkaz na uzitecnou prezenatci (4,7 MB PDF) od Luke Wroblewskiho, kde pise o tom, proc je take vhodne umistovat popisne prvky nad textova pole.

    http://www.lukew.com/resources/articles/DesignPatterns_LW.pdf (strana 27)

    Odpovědět
  2. Jiřík

    Čvc 29, 2009 v 23:08

    Ohledně toho předvyplnění zavináče … nepřijde mi to jako dobrý nápad. Jen se z uživatelů dělají počítačoví negramoti, kteří nevědí kde je zavináč (jasně, taky jsem to poprvé nevěděl). Jenže když v tom inputu zavináč předvyplněný je, tak se člověk musí trefit kurzorem přesně mezi hranici inputu a zavináče (pokud není nastavený velký padding zleva), nebo kliknout napravo a pak se šipkami posunout.

    Odpovědět
  3. Peter Laboš

    Říj 8, 2009 v 0:38

    Lenže niektorí užívatelia, ako som sa stretol pri vývoji a testovaní formulárov, sú schopní ti namiesto mailu zadať web adresu, či naopak. Takže ak im tam dáš zavináč k mailu, či skratku http:// alebo http://www., tak neopustia pre vlastnú hlúposť tvoju stránku. A stratiť zákazníka, ktorý prináša zisk, nech je akokoľvek hlúpy, asi nikto nechce :)

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *