Prístupné formuláre: popisy, nápovedy a chybové hlásenia

Šesť kritérií úspešnosti pre formuláre

WCAG 2.2 je aktuálne odporúčanie W3C pre prístupný webový obsah. Pre texty formulára je najdôležitejších šesť jeho kritérií úspešnosti:

• 1.3.1 Informácie a vzťahy (úroveň A): to, čo ukazuje rozloženie, napríklad ktorý popis patrí ku ktorému poľu, je dostupné aj v kóde alebo v texte.
• 1.3.5 Určenie účelu vstupu (úroveň AA): polia, ktoré žiadajú informácie o používateľovi, napríklad meno alebo e-mail, uvádzajú svoj účel v kóde.
• 3.3.1 Identifikácia chyby (úroveň A): ak sa chyba zadania zistí automaticky, pole sa pomenuje a chyba sa opíše textom.
• 3.3.2 Označenia alebo pokyny (úroveň A): ak obsah vyžaduje zadanie od používateľa, sú k dispozícii popisy alebo pokyny.
• 3.3.3 Návrh na opravu chyby (úroveň AA): ak sa chyba zistí a oprava je známa, navrhne sa, pokiaľ by to neohrozilo bezpečnosť alebo účel obsahu.
• 4.1.2 Názov, rola, hodnota (úroveň A): každý ovládací prvok má názov a rolu, ktoré dokáže prečítať softvér.

Každé pole potrebuje viditeľný popis

Popis hovorí, čo patrí do poľa, a zostáva viditeľný aj počas písania. V HTML prepoj prvok label s poľom: atribút for popisu má presne rovnakú hodnotu ako id poľa. Čítačky obrazovky potom prečítajú popis spolu s poľom a kliknutie na popis presunie kurzor do poľa. Tlačidlo dostane popis zo svojho textu a „Odoslať správu“ povie viac ako „Odoslať“. Popisy bývajú napravo od prepínačov a začiarkavacích políčok a naľavo od ostatných polí alebo nad nimi; popisy nad poľami potrebujú menej miesta na šírku.

Placeholder nie je popis

Sivý text v prázdnom poli vyzerá ako popis, ale nie je ním. W3C uvádza tieto problémy:

• Zmizne, len čo niekto začne písať, takže je ťažšie skontrolovať zadané údaje pred odoslaním.
• Prehliadače ho často zobrazujú svetlou farbou s príliš malým kontrastom.
• Čítačky obrazovky ho nepovažujú za popis a podpora sa líši.

Placeholder použi nanajvýš na príklad a všetko dôležité daj do popisu alebo nápovedy.

Nápovedy a povinné polia

• Pravidlá daj do nápovedy: formát dátumu, dĺžku zákazníckeho čísla, čo musí obsahovať heslo. V HTML môžeš nápovedu prepojiť pomocou aria-describedby, takže ju čítačky obrazovky prečítajú po popise.
• Uveď, ktoré polia sú povinné a ktoré nepovinné. Ak používaš hviezdičku, vysvetli ju raz na začiatku formulára.
• Pokyny pre celý formulár daj pred formulár, napríklad o časovom limite.
• Nápovedy píš krátko. Priveľa pokynov formulár sťažuje, nie uľahčuje.

Zoskup súvisiace polia

Prepínače a začiarkavacie políčka, ktoré patria k sebe, sa zoskupujú prvkom fieldset a prvok legend skupinu pomenuje, napríklad „Ako vás máme kontaktovať?“. W3C uvádza, že skupiny prepínačov by sa mali takto zoskupovať vždy. Legendu píš krátko, pretože niektoré čítačky obrazovky ju čítajú pri každom poli. Skupiny pomáhajú aj pri poliach s rovnakým popisom, napríklad pri ulici v dodacej a fakturačnej adrese.

autocomplete: nechaj prehliadač pomôcť

Pri poliach, ktoré žiadajú informácie o používateľovi, 1.3.5 vyžaduje, aby sa dal ich účel určiť v kóde. WCAG 2.2 má zoznam týchto účelov, založený na časti o automatickom vypĺňaní v špecifikácii HTML, napríklad name, given-name, family-name, email, tel, street-address a postal-code. V HTML ich nastavíš atribútom autocomplete, napríklad autocomplete="email". Prehliadače potom môžu vyplniť uložené hodnoty, čo šetrí písanie. Polia, ktoré sa netýkajú používateľa, účel nepotrebujú.

Chybové hlásenia, ktoré pomáhajú

Chybové hlásenie má tri úlohy: pomenovať pole, povedať, čo je zle, a povedať, ako to opraviť. 3.3.1 žiada prvé dve, a to textom, takže samotný červený okraj alebo ikona nestačí. 3.3.3 žiada opravu tam, kde je známa.

• Hlásenie zobraz vedľa poľa a prepoj ho pomocou aria-describedby, aby ho čítačky obrazovky prečítali spolu s poľom.
• Po odoslaní zobraz navrchu, pred formulárom, zoznam všetkých chýb pod jasným nadpisom. Každý záznam pomenuje pole, problém a opravu a odkazuje na pole.
• Aktualizuj aj titulok stránky, napríklad „2 chyby – Kontaktný formulár“, a presuň zameranie na prvé pole s chybou.
• Zachovaj to, čo už používateľ zadal. Toto je naša rada, nie pravidlo WCAG: písať všetko znova po jednej chybe ľudí odradí.

Skontroluj svoj formulár s Do4U

Nástroj Texty formulárov kontroluje texty webového formulára. Vložíš HTML formulára alebo zadáš adresu stránky a môžeš pridať chybové hlásenia, ktoré tvoj formulár ukazuje. Kód prečíta každé pole: jeho popis a odkiaľ popis pochádza, nápovedy, zástupné texty, povinné polia, hodnoty autocomplete a skupiny prepínačov alebo začiarkavacích políčok. Nájde problémy ako pole bez popisu, placeholder ako jediný popis, povinné polia, ktoré text nespomína, chýbajúce hodnoty autocomplete a nejasné chybové hlásenia, každý s jeho kritériom úspešnosti. AI navrhne jasný popis, krátku nápovedu a chybové hlásenie, ktoré pomenuje pole a povie, ako opraviť zadanie. Kód skontroluje každý návrh a z tvojho formulára vytvorí vylepšený návrh HTML.

Do4U nájde tipy a vytvorí návrh, ty skontroluješ a rozhodneš. Nástroj kontroluje značkovanie, nie tvoje štýly, skripty ani ovládanie klávesnicou, a nepovie ti, či je tvoj formulár prístupný. Vylepšený formulár otestuj klávesnicou a čítačkou obrazovky.