Miksi lomakkeet ovat niin kriittisiä?
Lomakkeen täyttäminen on usein uuden alku joko asiakassuhteen tai tietyn palvelun näkökulmasta. Palvelupolun alussa lomakkeen täyttäjästä tulee asiakas ja vuorovaikutus palveluntarjoajan kanssa alkaa. Myöhemmissä vaiheissa asiakas voi käyttää lomakkeita yhteydenpitoon tai uusien palveluiden hakemiseen.
Yhteistä kaikille lomakkeille käyttötarkoituksesta riippumatta on se, että niiden täyttäminen johtaa johonkin toimintaan tai käynnistää jotain. Käyttäjä saa yleensä myös jonkun vastineen lomakkeen täyttämisestä, kuten palvelun, vahvistuksen tai päätöksen.
Lomakkeiden saavutettavuusongelmien vaikutukset voivat siis olla kauaskantoiset, eikä virheisiin ole varaa kriittisissä palveluissa. Saavutettava lomake on paitsi ymmärrettävä, mutta myös täytettävissä kaikilla erilaisilla laitteilla, selaimilla ja apuvälineillä. Katsotaan seuraavaksi, mitkä asiat ovat erityisen tärkeitä saavutettavan lomakkeen suunnittelussa ja teknisessä toteutuksessa.
1. Kenttien nimeäminen vähentää virheellisiä tietoja
Yksi yleisimmistä saavutettavuusvirheistä liittyy kenttien nimeämiseen. Jokaisella kentällä tulee olla näkyvä, ohjelmallisesti liitetty nimilappu eli label-elementti. Eli käytännössä lomakekentän yhteydessä pitää koko ajan olla visuaalinen teksti, joka kertoo, mikä tieto kenttään täytetään. Pelkkä placeholder-teksti ei siis riitä, mutta miksi ei?
Placeholder-teksteissä on useita haasteita:
- Placeholder katoaa, kun käyttäjä kirjoittaa kenttään. Käyttäjä ei siis pysty sujuvasti tarkistamaan kentän nimeä, jos kenttään on täytetty tekstiä.
- Se on usein heikkokontrastinen, eli kaikki käyttäjät eivät näe tekstiä lainkaan.
- Placeholder-teksti ei välity kaikissa tilanteissa apuvälineille kentän varsinaisena nimenä, eli apuvälinekäyttäjät eivät välttämättä saa tietoa oikeasta syötteestä.
Kirjoita siis kentälle selkeä ja näkyvä nimi ja yhdistä se teknisesti kenttään for- ja id-attribuuttien avulla. Tämä ratkaisu helpottaa myös mobiilikäyttöä ja parantaa elementin klikattavuutta.
Varmista myös, että yksi kenttä palvelee yhtä tarkoitusta. Jos esimerkiksi Nimi-kenttä tarkoittaa eri tilanteissa eri asiaa, käyttäjä joutuu tulkitsemaan ohjetta itse. Erottele mieluummin etu- ja sukunimi selkeästi omiin kenttiinsä, niin saat parempia vastauksia ja vähennät käyttäjien epävarmuutta.
2. Pakolliset kentät ja syötteiden muodot tulee ilmaista suoraan
Saavutettavan lomakkeen perusperiaate on se, että käyttäjän pitää ymmärtää heti, mitä tietoja häneltä vaaditaan. Voit varmistaa, että saat vastauksen tärkeimpiin kenttiin merkitsemällä ne pakollisiksi. Ole kuitenkin tarkkana, että pakollisuus välittyy tarpeeksi selkeästi.
Selkein tapa on ilmaista pakollisuus suoraan tekstimuodossa, esimerkiksi lisäämällä kentän nimeen maininta (pakollinen).
Pakollisuuden ilmaiseminen asteriskilla eli tähdellä (*) on edelleen yleinen käytäntö. Symbolin tarkoitus ei kuitenkaan ole kaikille välttämättä selvä. Jos käytät tähteä, selitä sen merkitys selkeästi lomakkeen alussa (* = pakollinen kenttä). Myös required-attribuutin käyttö kenttien yhteydessä välittää tiedon pakollisuudesta selkeästi myös apuvälineille.
Mieti sijaintia ymmärrettävyyden näkökulmasta
Ohjeiden sijoittelu ja tekninen toteutus vaikuttavat suoraan siihen, miten helppoa lomaketta on ymmärtää. Jos kentän täyttöön liittyy vaatimuksia, päivämäärän tai kellonajan esitystapa, kerro tästä käyttäjälle heti kentän yhteydessä. Jos annat oikeasta syötemuodosta tarkentavia ohjeita, liitä ne kenttään myös ohjelmallisesti esimerkiksi aria-describedby-attribuutin avulla. Näin apuvälineet lukevat ohjeen oikeassa yhteydessä.
3. Virhetilanteet vaativat selkeää ohjeistusta
Virheviestit ilmaantuvat silloin, kun käyttäjä on unohtanut täyttää pakollisen kentän tai lomakkeen täytössä on tapahtunut muu virhe. Virheviestit ovat usein lomakkeiden heikoin kohta, koska ne tarjoavat yleensä liian vähän tietoa. Käyttäjä voi saada epämääräisen ilmoituksen, kuten ”Tarkista tiedot”, ja jää käyttäjän vastuulle selvittää ja etsiä, missä virhe sijaitsee ja miten se pitäisi korjata.
Hyvä virheviesti kertoo, mistä virhe löytyy, mikä se tarkalleen on ja miten sen voi korjata. Esimerkiksi ilmoitus ”Salasana ei ole tarpeeksi pitkä. Varmista, että salasanassa on vähintään 8 merkkiä.” antaa käyttäjälle konkreettisen toimintaohjeen.
Osoita virhe selkeästi useilla eri tavoilla
Käyttäjän pitäisi pystyä löytämään virheellisesti täytetty kenttä mahdollisimman helposti ja nopeasti lomakkeesta. Siksi virhe tulee osoittaa sekä visuaalisesti ja ohjelmallisesti.
Visuaalinen indikaattori voi olla esimerkiksi punainen reunus, mutta sen lisäksi virhe pitää ilmoittaa kentän yhteydessä myös tekstimuodossa. Pelkkä punainen reunus ei riitä, koska kaikki käyttäjät eivät havaitse värejä samalla tavalla. Apuvälineet eivät myöskään tunnista värimuutosta.
Ohjelmallinen osoitus hoituu tekstimuotoisen virheilmoituksen kautta, kun se on liitetty kyseiseen kenttään teknisesti esimerkiksi aria-describedby-attribuutilla.
Pitkissä lomakkeissa on hyödyllistä tarjota virheiden yhteenveto lomakkeen alussa tai lopussa ja tarjota listassa suorat linkit virheellisiin kohtiin. Tämä yksinkertainen tapa nopeuttaa virheiden korjaamista ja voi vähentää käyttäjän turhautuneisuuden tunteita.
4. Automaattinen täyttö tukee sujuvaa asiointia
Automaattinen täyttö parantaa käyttökokemusta ja on myös saavutettavuusvaatimus. Hyödynnä siis kentissä oikeita autocomplete-attribuutteja, niin selaimet osaavat ehdottaa käyttäjän aiemmin tallentamia tietoja kenttien syötteeksi.
Automaattinen täyttö vähentää kirjoittamisen tarvetta ja pienentää virheiden riskiä. Se helpottaa erityisesti käyttäjiä, joilla on motorisia tai kognitiivisia haasteita, mutta nopeuttaa kaikkien käyttäjien asiointia.
5. Lomakekenttien ryhmittely luo rakennetta
Lomakkeissa toisiinsa liittyvät kentät (esimerkiksi radiopainikkeet), tulee ryhmitellä ohjelmallisesti. Tällöin apuvälinekäyttäjä ymmärtää, mihin kokonaisuuteen yksittäiset valinnat liittyvät. Ryhmittele kentät esimerkiksi fieldset– elementillä ja anna niille ryhmäotsikko legend-elementillä.
Monivaiheisessa lomakkeessa käyttäjälle tulee kertoa selkeästi, missä vaiheessa hän on menossa ja kuinka monta vaihetta on jäljellä. Selkeä etenemispolku lisää luottamusta ja vähentää keskeytyksiä.
Jos lomake muuttaa sisältöään käyttäjän valintojen perusteella, kaikkien muutosten tulee olla ohjelmallisesti havaittavia. Toisin sanoen, uusien kenttien ilmestyminen tai virheilmoitusten päivittyminen ei saa jäädä pelkästään visuaalisen havainnon varaan. Voit hyödyntää esimerkiksi ARIA-live-alueita, jotta tieto muutoksista välittyy apuvälineille.
Yhteenveto: Korjaa lomakeongelmat jo ennen auditointia
Lomakkeiden ongelmat havaitaan usein vasta auditoinnissa tai käyttäjätestauksessa, vaikka niiden vaikutukset ovatkin suuria. Ota siis saavutettavuus huomioon suunnitteluvaiheessa ja varmistaa toteutus huolellisella testauksella. Näillä vinkeillä pääset jo pitkälle.
Saavutettavuusauditointi on toki hyvä keino lähteä liikkeelle saavutettavuuden kanssa, jos aihe on vieras. Ota yhteyttä asiantuntijoihimme, niin aloitetaan tärkeä työ yhdenvertaisuuden eteen.
