Přístupné formuláře: popisky, nápovědy a chybové hlášky

Šest kritérií úspěšnosti pro formuláře

WCAG 2.2 je aktuální doporučení W3C pro přístupný webový obsah. Pro texty formuláře je nejdůležitějších šest jeho kritérií úspěšnosti:

• 1.3.1 Informace a vztahy (úroveň A): to, co ukazuje rozvržení, například který popisek patří ke kterému poli, je dostupné i v kódu nebo v textu.
• 1.3.5 Určení účelu vstupu (úroveň AA): pole, která se ptají na údaje o uživateli, například jméno nebo e-mail, uvádějí svůj účel v kódu.
• 3.3.1 Identifikace chyb (úroveň A): pokud je chyba vstupu zjištěna automaticky, pole je pojmenováno a chyba je popsána textem.
• 3.3.2 Popisky nebo instrukce (úroveň A): popisky nebo instrukce jsou k dispozici, když obsah vyžaduje vstup od uživatele.
• 3.3.3 Návrh opravy chyby (úroveň AA): pokud je chyba zjištěna a oprava je známá, navrhne se, ledaže by to ohrozilo bezpečnost nebo účel obsahu.
• 4.1.2 Název, role, hodnota (úroveň A): každý ovládací prvek má název a roli, které software dokáže přečíst.

Každé pole potřebuje viditelný popisek

Popisek říká, co do pole patří, a zůstává viditelný, i když uživatel píše. V HTML propoj element label s polem: atribut for popisku má přesně stejnou hodnotu jako id pole. Čtečky obrazovky pak čtou popisek spolu s polem a kliknutí na popisek umístí kurzor do pole. Tlačítko dostává popisek ze svého textu a „Odeslat zprávu“ řekne víc než „Odeslat“. Popisky bývají vpravo od přepínačů a zaškrtávacích políček a vlevo od ostatních polí nebo nad nimi; popisky nad poli zabírají méně místa na šířku.

Placeholder není popisek

Šedý text uvnitř prázdného pole vypadá jako popisek, ale popiskem není. W3C jmenuje problémy:

• Zmizí, jakmile někdo začne psát, takže je těžší zkontrolovat zadané údaje před odesláním.
• Prohlížeče ho často zobrazují světlou barvou s příliš malým kontrastem.
• Čtečky obrazovky ho neberou jako popisek a podpora se liší.

Placeholder používej nanejvýš pro příklad a vše důležité dej do popisku nebo nápovědy.

Nápovědy a povinná pole

• Pravidla dej do nápovědy: formát data, délku zákaznického čísla, co musí obsahovat heslo. V HTML můžeš nápovědu propojit pomocí aria-describedby, aby ji čtečky obrazovky přečetly po popisku.
• Uveď, která pole jsou povinná a která nepovinná. Pokud používáš hvězdičku, vysvětli ji jednou na začátku formuláře.
• Instrukce k celému formuláři dej před formulář, například k časovému limitu.
• Nápovědy piš krátce. Příliš mnoho instrukcí formulář ztěžuje, ne usnadňuje.

Seskup související pole

Přepínače a zaškrtávací políčka, která patří k sobě, se seskupují elementem fieldset a element legend skupinu pojmenuje, například „Jak tě máme kontaktovat?“. W3C uvádí, že skupiny přepínačů by se měly seskupovat vždy tímto způsobem. Legendu drž krátkou, protože některé čtečky obrazovky ji čtou u každého pole. Skupiny pomáhají i u polí se stejným popiskem, například ulice v doručovací a ve fakturační adrese.

autocomplete: nech prohlížeč pomoci

U polí, která se ptají na údaje o uživateli, požaduje 1.3.5, aby jejich účel bylo možné určit v kódu. WCAG 2.2 obsahuje seznam těchto účelů, založený na oddílu o automatickém vyplňování ve specifikaci HTML, například name, given-name, family-name, email, tel, street-address a postal-code. V HTML je nastavíš atributem autocomplete, například autocomplete="email". Prohlížeče pak mohou doplnit uložené hodnoty, což ušetří psaní. Pole, která se netýkají uživatele, účel nepotřebují.

Chybové hlášky, které pomáhají

Chybová hláška má tři úkoly: pojmenovat pole, říct, co je špatně, a říct, jak to opravit. 3.3.1 požaduje první dva, a to textem, takže červený rámeček nebo ikona samy nestačí. 3.3.3 požaduje opravu tam, kde je známá.

• Zobraz hlášku vedle pole a propoj ji pomocí aria-describedby, aby ji čtečky obrazovky přečetly spolu s polem.
• Po odeslání zobraz nahoře, před formulářem, seznam všech chyb pod jasným nadpisem. Každá položka jmenuje pole, problém a opravu a odkazuje na pole.
• Aktualizuj i titulek stránky, například „2 chyby – Kontaktní formulář“, a přesuň fokus na první pole s chybou.
• Zachovej, co uživatel už zadal. To je naše rada, ne pravidlo WCAG: psát všechno znovu kvůli jedné chybě lidi odrazuje.

Zkontroluj svůj formulář s Do4U

Nástroj Texty formulářů kontroluje texty webového formuláře. Vložíš HTML formuláře nebo zadáš adresu stránky a můžeš přidat chybové hlášky, které tvůj formulář zobrazuje. Kód přečte každé pole: jeho popisek a odkud popisek pochází, nápovědy, placeholdery, povinná pole, hodnoty autocomplete a skupiny přepínačů nebo zaškrtávacích políček. Najde problémy, jako je pole bez popisku, placeholder jako jediný popisek, povinná pole, která text nezmiňuje, chybějící hodnoty autocomplete a vágní chybové hlášky, každý s jeho kritériem úspěšnosti. AI navrhne jasný popisek, krátkou nápovědu a chybovou hlášku, která pojmenuje pole a řekne, jak vstup opravit. Kód každý návrh zkontroluje a z tvého formuláře sestaví vylepšený koncept HTML.

Do4U najde tipy a sestaví koncept, ty kontroluješ a rozhoduješ. Nástroj kontroluje značky, ne tvé styly, skripty ani ovládání klávesnicí, a neřekne ti, zda je tvůj formulář přístupný. Vyzkoušej vylepšený formulář s klávesnicí a se čtečkou obrazovky.