Etiketit tai ohjeet

Mitä vaaditaan

Kun käyttäjältä pyydetään syötettä — tekstikenttä, valintaruutu, radiopainike, valintaluettelo, päivämäärävalitsin, tiedostonvalitsin — on oltava etiketti tai ohje, joka kertoo, mitä odotetaan. Etiketti voi olla näkyvä teksti, <label>-elementti, aria-label tai aria-labelledby; ohjeet voivat sisältää vaaditun muodon, sallitut arvot tai esimerkkejä.

Pakolliset kentät, odotetut muodot (“PP/KK/VVVV”) ja erityisrajoitukset (“vähintään 8 merkkiä, isoja ja pieniä kirjaimia”) kuuluvat kaikki tämän onnistumiskriteerin piiriin.

Miten vaatimus täytetään

• Yhdistä jokainen <input>, <textarea> ja <select> <label for="…"> -elementtiin, jonka for-attribuutti vastaa syötteen id:tä.
• Älä koskaan käytä placeholder-tekstiä ainoana etiketin muotona — placeholderit katoavat kohdistettaessa ja niiden kontrasti on heikko.
• Ilmoita pakolliset kentät näkyvästi (tähti, sana “pakollinen” tai aria-required="true") ja selitä käytäntö lomakkeen yläosassa.
• Määritä odotettu muoto etukäteen, ei vasta käyttäjän virheen jälkeen: “Päivämäärä (PP/KK/VVVV)” tai “Puhelinnumero, esim. 040-123-4567.”
• Valintaruutu- tai radiopainike-ryhmille käytä <fieldset> ja <legend> -elementtejä ryhmän merkitsemiseen.
• Pelkille kuvakkeille tai suodatinpalkin syötteille käytä aria-label-attribuuttia mielekkään nimen antamiseksi.

Tyypilliset virheet

• Lomakkeet, joissa placeholder-teksti on ainoa etiketti, joka katoaa heti, kun käyttäjä alkaa kirjoittaa.
• Pakolliset kentät, jotka on merkitty vain punaisilla tähdillä ilman ohjelmallista yhteyttä.
• Syntymäpäiväsyötteet, jotka odottavat tiettyä muotoa ja kertovat siitä vasta validoinnin epäonnistuttua.
• Hakusyötteet, jotka on merkitty suurennuslasin kuvakkeella ilman saavutettavaa nimeä.
• Kirjautumislomakkeet, joissa käyttäjänimi- ja salasanakentät on sijoitettu visuaalisesti etiketin viereen, mutta niitä ei ole ohjelmallisesti yhdistetty.

Miksi se on tärkeää

Lomakkeet ovat paikkoja, joissa useimmat käyttäjät asioivat verkkosivuston kanssa — rekisteröityvät, maksavat, ottavat yhteyttä, hakevat tukea, varaavat aikoja. Merkitsemättömät tai riittämättömästi merkityt lomakkeet sulkevat ruudunlukuohjelman käyttäjät kokonaan pois, koska he eivät pysty kertomaan, mitä tietoa kukin ruutu haluaa. Ne epäonnistuvat myös dysleksiaa sairastavien käyttäjien kohdalla, jotka menettävät kontekstin heti, kun placeholder katoaa, sekä kognitiivisia vaikeuksia kokevien käyttäjien kohdalla, jotka hyötyvät muoto-ohjeista etukäteen.

Etiketit ovat myös välttämättömiä salasananhallintaohjelmille, automaattiselle täytölle ja puheentunnistussovelluksille, jotka kaikki käyttävät etikettitekstiä kenttien täsmäyttämiseen. Hyvin merkitty lomake hyödyttää kaikkia.