Saavutettavat lomakkeet: selitteet, vihjeet ja virheet

Kuusi onnistumiskriteeriä lomakkeille

WCAG 2.2 on W3C:n voimassa oleva suositus saavutettavalle verkkosisällölle. Lomakkeen teksteille tärkeimpiä ovat kuusi sen onnistumiskriteeriä:

• 1.3.1 Info and Relationships (taso A): se, mitä asettelu näyttää, kuten mikä selite kuuluu mihinkin kenttään, on saatavilla myös koodissa tai tekstinä.
• 1.3.5 Identify Input Purpose (taso AA): kentät, jotka kysyvät käyttäjää koskevia tietoja, kuten nimeä tai sähköpostiosoitetta, ilmaisevat tarkoituksensa koodissa.
• 3.3.1 Error Identification (taso A): jos syötevirhe havaitaan automaattisesti, kenttä nimetään ja virhe kuvataan tekstinä.
• 3.3.2 Labels or Instructions (taso A): selitteet tai ohjeet annetaan, kun sisältö vaatii käyttäjän syötettä.
• 3.3.3 Error Suggestion (taso AA): jos virhe havaitaan ja korjaus tiedetään, se ehdotetaan, ellei se vaarantaisi sisällön turvallisuutta tai tarkoitusta.
• 4.1.2 Name, Role, Value (taso A): jokaisella ohjaimella on nimi ja rooli, jotka ohjelmisto pystyy lukemaan.

Jokainen kenttä tarvitsee näkyvän selitteen

Selite kertoo, mitä kenttään kuuluu, ja se pysyy näkyvissä kirjoittamisen aikana. Yhdistä HTML:ssä label-elementti kenttään: selitteen for-määritteellä on täsmälleen sama arvo kuin kentän id:llä. Ruudunlukijat lukevat silloin selitteen kentän kanssa, ja selitteen napsauttaminen siirtää kohdistimen kenttään. Painike saa selitteensä tekstistään, ja ”Lähetä viesti” kertoo enemmän kuin ”Lähetä”. Valintanappien ja valintaruutujen selitteet ovat yleensä oikealla puolella, muiden kenttien selitteet vasemmalla tai yläpuolella; yläpuolella olevat selitteet vievät vähemmän tilaa leveyssuunnassa.

Paikkamerkki ei ole selite

Tyhjän kentän sisällä oleva harmaa teksti näyttää selitteeltä, mutta ei ole sellainen. W3C nimeää ongelmat:

• Se katoaa heti, kun joku alkaa kirjoittaa, joten syötteiden tarkistaminen ennen lähettämistä on vaikeampaa.
• Selaimet näyttävät sen usein vaalealla värillä ja liian pienellä kontrastilla.
• Ruudunlukijat eivät käsittele sitä selitteenä, ja tuki vaihtelee.

Käytä paikkamerkkiä korkeintaan esimerkkinä, ja kirjoita kaikki tärkeä selitteeseen tai vihjeeseen.

Vihjeet ja pakolliset kentät

• Kirjoita säännöt vihjeeseen: päivämäärän muoto, asiakasnumeron pituus, mitä salasanassa pitää olla. HTML:ssä voit yhdistää vihjeen kenttään aria-describedby-määritteellä, jolloin ruudunlukijat lukevat sen selitteen jälkeen.
• Kerro, mitkä kentät ovat pakollisia ja mitkä vapaaehtoisia. Jos käytät tähteä, selitä se kerran lomakkeen alussa.
• Kirjoita koko lomaketta koskevat ohjeet ennen lomaketta, esimerkiksi aikarajasta.
• Pidä vihjeet lyhyinä. Liian monet ohjeet tekevät lomakkeesta vaikeamman, eivät helpompaa.

Ryhmittele yhteen kuuluvat kentät

Yhteen kuuluvat valintanapit ja valintaruudut ryhmitellään fieldset-elementillä, ja legend-elementti nimeää ryhmän, esimerkiksi ”Miten haluat, että otamme sinuun yhteyttä?”. W3C:n mukaan valintanappiryhmät pitäisi aina ryhmitellä näin. Pidä legend lyhyenä, koska jotkin ruudunlukijat lukevat sen jokaisen kentän kohdalla. Ryhmät auttavat myös kentissä, joilla on sama selite, kuten katuosoite toimitus- ja laskutusosoitteessa.

autocomplete: anna selaimen auttaa

Käyttäjää koskevia tietoja kysyvissä kentissä 1.3.5 edellyttää, että niiden tarkoitus voidaan määrittää koodista. WCAG 2.2:ssa on luettelo näistä tarkoituksista HTML-määrittelyn automaattisen täytön osion pohjalta, kuten name, given-name, family-name, email, tel, street-address ja postal-code. HTML:ssä ne asetetaan autocomplete-määritteellä, esimerkiksi autocomplete="email". Selaimet voivat silloin täyttää tallennetut arvot, mikä säästää kirjoittamista. Kentät, jotka eivät koske käyttäjää, eivät tarvitse tarkoitusta.

Virheilmoitukset, jotka auttavat

Virheilmoituksella on kolme tehtävää: nimetä kenttä, kertoa mikä on vialla ja kertoa miten sen voi korjata. 3.3.1 edellyttää kahta ensimmäistä tekstinä, joten pelkkä punainen reunus tai kuvake ei riitä. 3.3.3 edellyttää korjausehdotusta silloin, kun se tiedetään.

• Näytä ilmoitus kentän vieressä ja yhdistä se aria-describedby-määritteellä, jolloin ruudunlukijat lukevat sen kentän kanssa.
• Näytä lähettämisen jälkeen luettelo kaikista virheistä ylhäällä ennen lomaketta selkeän otsikon alla. Jokainen kohta nimeää kentän, ongelman ja korjauksen ja linkittää kenttään.
• Päivitä myös sivun otsikko, esimerkiksi ”2 virhettä – Yhteydenottolomake”, ja siirrä kohdistus ensimmäiseen virheelliseen kenttään.
• Säilytä se, mitä käyttäjä on jo syöttänyt. Tämä on meidän neuvomme, ei WCAG-sääntö: kaiken kirjoittaminen uudelleen yhden virheen jälkeen saa ihmiset luovuttamaan.

Tarkista lomakkeesi Do4U:lla

Lomaketekstit-työkalu tarkistaa verkkolomakkeen tekstit. Liität lomakkeen HTML-koodin tai annat sivun osoitteen, ja voit lisätä virheilmoitukset, joita lomakkeesi näyttää. Koodi lukee jokaisen kentän: sen selitteen ja mistä selite tulee, vihjeet, paikkamerkit, pakolliset kentät, autocomplete-arvot sekä valintanappi- ja valintaruuturyhmät. Se löytää ongelmia, kuten kentän ilman selitettä, paikkamerkin ainoana selitteenä, pakolliset kentät, joita teksti ei mainitse, puuttuvat autocomplete-arvot ja epämääräiset virheilmoitukset, kukin onnistumiskriteereineen. Tekoäly ehdottaa selkeää selitettä, lyhyttä vihjettä ja virheilmoitusta, joka nimeää kentän ja kertoo, miten syötteen voi korjata. Koodi tarkistaa jokaisen ehdotuksen ja rakentaa lomakkeestasi parannetun HTML-luonnoksen.

Do4U löytää vihjeitä ja laatii luonnoksen, sinä tarkistat ja päätät. Työkalu tarkistaa merkinnät, ei tyylejäsi, skriptejäsi tai näppäimistökäyttöä, eikä se kerro, onko lomakkeesi saavutettava. Testaa parannettu lomake näppäimistöllä ja ruudunlukijalla.