Pristupačni obrasci: oznake, upute i poruke o pogreškama

Šest kriterija uspješnosti za obrasce

WCAG 2.2 trenutačna je preporuka W3C-a za pristupačan web-sadržaj. Za tekstove obrasca najvažnije je šest njegovih kriterija uspješnosti:

• 1.3.1 Informacije i odnosi (razina A): ono što prikazuje raspored, primjerice koja oznaka pripada kojem polju, dostupno je i u kôdu ili u tekstu.
• 1.3.5 Prepoznavanje svrhe unosa (razina AA): polja koja traže podatke o korisniku, poput imena ili e-adrese, izlažu svoju svrhu u kôdu.
• 3.3.1 Prepoznavanje pogrešaka (razina A): ako se pogreška unosa otkrije automatski, polje se navodi, a pogreška se opisuje tekstom.
• 3.3.2 Oznake ili upute (razina A): oznake ili upute daju se kada sadržaj zahtijeva unos korisnika.
• 3.3.3 Prijedlog ispravka (razina AA): ako se pogreška otkrije, a ispravak je poznat, on se predlaže, osim ako bi to ugrozilo sigurnost ili svrhu sadržaja.
• 4.1.2 Naziv, uloga, vrijednost (razina A): svaki kontrolni element ima naziv i ulogu koje softver može pročitati.

Svako polje treba vidljivu oznaku

Oznaka kaže što ide u polje i ostaje vidljiva dok korisnik upisuje. U HTML-u poveži element label s poljem: atribut for oznake ima točno istu vrijednost kao id polja. Čitači zaslona tada čitaju oznaku zajedno s poljem, a klik na oznaku stavlja pokazivač u polje. Gumb dobiva oznaku iz svog teksta, a „Pošalji poruku” govori više od „Pošalji”. Oznake obično stoje desno od izbornih gumba i potvrdnih okvira te lijevo od ostalih polja ili iznad njih; oznake iznad polja trebaju manje prostora u širinu.

Placeholder nije oznaka

Sivi tekst unutar praznog polja izgleda kao oznaka, ali to nije. W3C navodi probleme:

• Nestaje čim netko počne upisivati, pa je teže provjeriti unose prije slanja.
• Preglednici ga često prikazuju svijetlom bojom s premalo kontrasta.
• Čitači zaslona ne tretiraju ga kao oznaku, a podrška se razlikuje.

Placeholder koristi najviše za primjer, a sve važno stavi u oznaku ili uputu.

Upute i obavezna polja

• Pravila stavi u uputu: format datuma, duljinu broja kupca, što lozinka treba sadržavati. U HTML-u uputu možeš povezati pomoću aria-describedby, pa je čitači zaslona čitaju nakon oznake.
• Reci koja su polja obavezna, a koja neobavezna. Ako koristiš zvjezdicu, objasni je jednom na početku obrasca.
• Upute za cijeli obrazac stavi ispred obrasca, na primjer o vremenskom ograničenju.
• Upute neka budu kratke. Previše uputa obrazac čini težim, a ne lakšim.

Grupiraj povezana polja

Izborni gumbi i potvrdni okviri koji pripadaju zajedno grupiraju se elementom fieldset, a element legend imenuje skupinu, na primjer „Kako da te kontaktiramo?”. W3C kaže da skupine izbornih gumba uvijek treba grupirati na ovaj način. Legend neka bude kratak jer ga neki čitači zaslona čitaju uz svako polje. Skupine pomažu i kod polja s istom oznakom, poput ulice u adresi za dostavu i u adresi za račun.

autocomplete: neka preglednik pomogne

Za polja koja traže podatke o korisniku kriterij 1.3.5 traži da se njihova svrha može utvrditi u kôdu. WCAG 2.2 ima popis tih svrha, temeljen na odjeljku o automatskom popunjavanju iz specifikacije HTML-a, poput name, given-name, family-name, email, tel, street-address i postal-code. U HTML-u ih postavljaš atributom autocomplete, na primjer autocomplete="email". Preglednici tada mogu popuniti spremljene vrijednosti, što štedi upisivanje. Polja koja se ne odnose na korisnika ne trebaju svrhu.

Poruke o pogreškama koje pomažu

Poruka o pogrešci ima tri zadaće: navesti polje, reći što nije u redu i reći kako to ispraviti. Kriterij 3.3.1 traži prve dvije, tekstom, pa crveni obrub ili ikona sami nisu dovoljni. Kriterij 3.3.3 traži ispravak ondje gdje je poznat.

• Prikaži poruku uz polje i poveži je pomoću aria-describedby, pa je čitači zaslona čitaju zajedno s poljem.
• Nakon slanja prikaži popis svih pogrešaka na vrhu, ispred obrasca, pod jasnim naslovom. Svaki unos navodi polje, problem i ispravak te povezuje na polje.
• Ažuriraj i naslov stranice, na primjer „2 pogreške – Kontaktni obrazac”, i premjesti fokus na prvo polje s pogreškom.
• Zadrži ono što je korisnik već unio. To je naš savjet, a ne pravilo WCAG-a: ponovno upisivanje svega nakon jedne pogreške tjera ljude da odustanu.

Provjeri svoj obrazac uz Do4U

Alat Tekstovi obrazaca provjerava tekstove web-obrasca. Zalijepiš HTML obrasca ili navedeš adresu stranice, a možeš dodati i poruke o pogreškama koje tvoj obrazac prikazuje. Kôd čita svako polje: njegovu oznaku i odakle oznaka dolazi, upute, placeholdere, obavezna polja, vrijednosti autocomplete i skupine izbornih gumba ili potvrdnih okvira. Pronalazi probleme poput polja bez oznake, placeholdera kao jedine oznake, obaveznih polja koja tekst ne spominje, vrijednosti autocomplete koje nedostaju i nejasnih poruka o pogreškama, svaki s pripadajućim kriterijem uspješnosti. AI predlaže jasnu oznaku, kratku uputu i poruku o pogrešci koja navodi polje i kaže kako ispraviti unos. Kôd provjerava svaki prijedlog i iz tvog obrasca izrađuje poboljšani HTML nacrt.

Do4U pronalazi savjete i izrađuje nacrt, a ti provjeravaš i odlučuješ. Alat provjerava oznake (markup), a ne tvoje stilove, skripte ni korištenje tipkovnicom, i ne kaže ti je li tvoj obrazac pristupačan. Testiraj poboljšani obrazac tipkovnicom i čitačem zaslona.