Dostopni obrazci: oznake, namigi in sporočila o napaki

Šest kriterijev uspešnosti za obrazce

WCAG 2.2 je trenutno priporočilo W3C za dostopno spletno vsebino. Za besedila obrazca je najpomembnejših šest njegovih kriterijev uspešnosti:

• 1.3.1 Informacije in razmerja (raven A): kar kaže postavitev, na primer katera oznaka spada h kateremu polju, je na voljo tudi v kodi ali v besedilu.
• 1.3.5 Določitev namena vnosa (raven AA): polja, ki sprašujejo po podatkih o uporabniku, na primer ime ali e-poštni naslov, svoj namen razkrijejo v kodi.
• 3.3.1 Prepoznavanje napak (raven A): če je napaka pri vnosu zaznana samodejno, je polje poimenovano, napaka pa opisana z besedilom.
• 3.3.2 Oznake ali navodila (raven A): kadar vsebina zahteva vnos uporabnika, so na voljo oznake ali navodila.
• 3.3.3 Predlog za odpravo napake (raven AA): če je napaka zaznana in je popravek znan, se ta predlaga, razen če bi to ogrozilo varnost ali namen vsebine.
• 4.1.2 Ime, vloga, vrednost (raven A): vsak kontrolnik ima ime in vlogo, ki ju programska oprema lahko prebere.

Vsako polje potrebuje vidno oznako

Oznaka pove, kaj sodi v polje, in ostane vidna, medtem ko uporabnik tipka. V HTML poveži element label s poljem: atribut for oznake ima natanko enako vrednost kot id polja. Bralniki zaslona nato preberejo oznako skupaj s poljem, klik na oznako pa postavi kazalec v polje. Gumb dobi oznako iz svojega besedila in 'Pošlji sporočilo' pove več kot 'Oddaj'. Oznake so pri izbirnih gumbih in potrditvenih poljih običajno desno, pri drugih poljih pa levo ali nad njimi; oznake nad polji potrebujejo manj prostora v širino.

Placeholder ni oznaka

Sivo besedilo v praznem polju je videti kot oznaka, a to ni. W3C navaja težave:

• Izgine, takoj ko kdo začne tipkati, zato je vnose pred pošiljanjem težje preveriti.
• Brskalniki ga pogosto prikažejo v svetli barvi s premalo kontrasta.
• Bralniki zaslona ga ne obravnavajo kot oznako, podpora pa se razlikuje.

Placeholder uporabi kvečjemu za primer, vse pomembno pa postavi v oznako ali namig.

Namigi in obvezna polja

• Pravila zapiši v namig: obliko datuma, dolžino številke stranke, kaj potrebuje geslo. V HTML lahko namig povežeš z aria-describedby, da ga bralniki zaslona preberejo za oznako.
• Povej, katera polja so obvezna in katera neobvezna. Če uporabljaš zvezdico, jo enkrat pojasni na začetku obrazca.
• Navodila za celoten obrazec postavi pred obrazec, na primer o časovni omejitvi.
• Namigi naj bodo kratki. Preveč navodil obrazec oteži, ne olajša.

Združi povezana polja

Izbirni gumbi in potrditvena polja, ki spadajo skupaj, se združijo z elementom fieldset, element legend pa skupino poimenuje, na primer 'Kako naj stopimo v stik s tabo?'. W3C pravi, da naj bodo skupine izbirnih gumbov vedno združene na ta način. Legend naj bo kratek, ker ga nekateri bralniki zaslona preberejo pri vsakem polju. Skupine pomagajo tudi pri poljih z enako oznako, na primer ulici v naslovu za dostavo in v naslovu za račun.

autocomplete: naj brskalnik pomaga

Za polja, ki sprašujejo po podatkih o uporabniku, 1.3.5 zahteva, da je njihov namen mogoče določiti v kodi. WCAG 2.2 ima seznam teh namenov, ki temelji na razdelku o samodejnem izpolnjevanju v specifikaciji HTML, na primer name, given-name, family-name, email, tel, street-address in postal-code. V HTML jih nastaviš z atributom autocomplete, na primer autocomplete="email". Brskalniki lahko nato izpolnijo shranjene vrednosti, kar prihrani tipkanje. Polja, ki se ne nanašajo na uporabnika, namena ne potrebujejo.

Sporočila o napaki, ki pomagajo

Sporočilo o napaki ima tri naloge: poimenuje polje, pove, kaj je narobe, in pove, kako to popraviš. 3.3.1 zahteva prvi dve, z besedilom, zato rdeč okvir ali ikona sama ne zadostuje. 3.3.3 zahteva popravek, kjer je znan.

• Sporočilo prikaži ob polju in ga poveži z aria-describedby, da ga bralniki zaslona preberejo skupaj s poljem.
• Po pošiljanju na vrhu, pred obrazcem, pod jasnim naslovom prikaži seznam vseh napak. Vsak vnos poimenuje polje, težavo in popravek ter vodi do polja.
• Posodobi tudi naslov strani, na primer '2 napaki – Kontaktni obrazec', in fokus premakni na prvo polje z napako.
• Ohrani, kar je uporabnik že vnesel. To je naš nasvet, ne pravilo WCAG: če morajo ljudje po eni napaki vse vtipkati znova, obupajo.

Preveri svoj obrazec z Do4U

Orodje Besedila obrazcev preveri besedila spletnega obrazca. Prilepiš HTML obrazca ali vneseš spletni naslov strani, dodaš pa lahko tudi sporočila o napaki, ki jih prikazuje tvoj obrazec. Koda prebere vsako polje: njegovo oznako in od kod oznaka prihaja, namige, placeholderje, obvezna polja, vrednosti autocomplete in skupine izbirnih gumbov ali potrditvenih polj. Najde težave, kot so polje brez oznake, placeholder kot edina oznaka, obvezna polja, ki jih besedilo ne omenja, manjkajoče vrednosti autocomplete in nejasna sporočila o napaki, vsako s pripadajočim kriterijem uspešnosti. UI predlaga jasno oznako, kratek namig in sporočilo o napaki, ki poimenuje polje in pove, kako popraviš vnos. Koda preveri vsak predlog in iz tvojega obrazca sestavi izboljšan osnutek HTML.

Do4U najde namige in sestavi osnutek, ti pa preveriš in odločiš. Orodje preveri oznake HTML, ne tvojih slogov, skriptov ali uporabe s tipkovnico, in ti ne pove, ali je tvoj obrazec dostopen. Izboljšani obrazec preizkusi s tipkovnico in bralnikom zaslona.