Kaikki ovat jossain vaiheessa joutuneet käsittelemään lomakkeita. Aiemmin enemmän paperilla. Nykyään ne ovat yhä useammin digitaalisia lomakkeita, sillä niitä käytetään käyttäjien vuorovaikutukseen verkkosivuston kanssa. Lomakkeita on kaikkialla, olipa kyse sitten verkkoviestinnästä tai tuotteen tilaamisesta. Myös Internet-haut esimerkiksi Googlella vaikuttavat niihin. Lomakkeiden täyttäminen on vaikeaa henkilöille, joilla on fyysisiä tai kognitiivisia vammoja, sekä sokeille ja näkövammaisille. Jotta kaikki voisivat osallistua julkiseen elämään, nämä lomakkeet on suunniteltava esteettömiksi. Mutta miten esteettömät lomakkeet oikeastaan luodaan?
Tähän on olemassa erilaisia tekniikoita. Ennen kuin pääset tekniikoihin käsiksi, sinun on kuitenkin tutustuttava lomakkeen elementteihin. Ne voidaan jakaa eri tyyppeihin. Niitä ovat muun muassa seuraavat tyypit
- Yksiriviset syöttökentät
- moniriviset syöttöalueet
- Valintaluettelot
- Radiopainikkeet
- Valintaruudut
- Painikkeet lähettämistä/peruuttamista varten
Lomakekenttien merkinnät
Jotta lomakkeet olisivat saavutettavia, eri ohjauselementit on merkittävä. Näiden merkintöjen avulla avustavat teknologiat voivat tunnistaa hallintalaitteiden toiminnot ja välittää ne käyttäjälle. On tärkeää, että merkinnät liittyvät selkeästi hallintalaitteisiin, sillä muuten ruudunlukuohjelmat eivät pysty luomaan yhteyttä elementteihin. Tämän seurauksena käyttäjillä on vaikeuksia ymmärtää lomaketta. He eivät pysty tunnistamaan, mitä tietoja mihinkin kenttään on syötettävä. Tämän seurauksena he eivät pysty täyttämään lomaketta oikein ja tekevät usein virheitä. Kaikkia kuvauksia ei kuitenkaan ole merkitty samalla tavalla. Ratkaisevaa on, pitäisikö niiden olla kaikkien nähtävissä vai ei. HTML-ohjelmointikielessä tehdäänkin ero label-elementin ja aria-attribuuttien välillä. Label-elementtiä käytetään syöttökentissä, valintalistoissa, valintapainikkeissa ja valintaruuduissa, ja se on sijoitettava sen mukaisesti. Syöttökenttien ja valintalistojen kohdalla label sijoitetaan ennen ohjauselementtejä. Radiopainikkeiden ja valintaruutujen kohdalla ne sijoitetaan kuitenkin ohjauselementin jälkeen. For-attribuutti on lisättävä, jotta tarrat voidaan myös linkittää vastaavaan elementtiin.
Aria-attribuuttia käytetään HTML:ssä painikkeissa. Painikkeet voivat esimerkiksi edustaa lomakkeen lähetys- tai peruutustoimintoa. Aria-attribuuttien avulla kyseisten elementtien kuvaukset ovat tunnistettavissa vain avustavia teknologioita varten. Niitä voidaan siis käyttää myös syöttökenttiin, joiden pitäisi näkyä vain ruudunlukijalle. Internetin saavutettavuuden parantamiseen käytetään monia aria-attribuutteja. Ne eroavat kuitenkin toisistaan tyypiltään ja toiminnaltaan. Niin sanottua aria-labelia käytetään elementin merkitsemiseen. Tietenkin on myös mahdollista käyttää samaa merkintää useille elementeille. Tämän mahdollistaa aria-labelledby.
Yksiriviset ja moniriviset syöttökentät
Syöttökentät ovat lomakkeiden yleisimmin käytettyjä elementtejä. Ne voivat olla yksirivisiä tai monirivisiä. Yksirivisiä kenttiä käytetään lyhyisiin kyselyihin, esimerkiksi henkilön nimen, sähköpostiosoitteen, kadun tai kaupungin hakuun.
Ne luodaan HTML:ssä input-tunnisteen ja type-attribuutin avulla.
Lisäksi voidaan lisätä lisäattribuutteja, esimerkiksi viivan pituuden määrittelemiseksi.
Monirivisiä kenttiä käytetään yleensä suurempiin tekstialueisiin, kuten tekstiviesteihin. Nämä luodaan textarea-tunnisteella. Tässäkin kehittäjä voi määrittää rivien määrän ja rivin pituuden. Jotta nämä kentät olisivat käytettävissä, on kuitenkin lisättävä label-tagi. Etiketin ja elementtien välille ei kuitenkaan voi luoda yhteyttä, jos niitä ei ole selkeästi määritetty. Tällöin ne on linkitettävä toisiinsa for- ja id-attribuuttien avulla. Seuraavassa HTML-esimerkissä tällaisiin syöttökenttiin on toteutettu yksinkertaiset tarrat.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Tässä luodaan ensin yksirivinen syöttökenttä etunimelle, jonka tyyppi on "text". Label-elementin avulla etiketti "Etunimesi:" tehdään näkyväksi kaikille. Tämä sijoitetaan ennen input-elementtiä, koska se tulostetaan ennen input-kenttää. Nämä alueet on linkitetty toisiinsa label-tagin for-attribuutin ja input-elementin id-attribuutin avulla. Tässä yhteydessä on tärkeää, että molempien sisältö on identtinen, sillä muuten niitä ei voida linkittää. name-attribuutti toimii kentän tunnisteena, ja sitä tarvitaan tietojen siirtämiseen palvelinsivulle.
Seuraavaksi luodaan monirivinen syöttöalue käyttämällä "textarea"-tunnistetta. Tämän jälkeen label-elementti näyttää otsikon "Viestisi:". Tässäkin tapauksessa kaksi aluetta, joilla on sama tekstisisältö, linkitetään toisiinsa for- ja id-attribuuttien avulla.
Yleisiä tietoja
Lomakkeiden on yleensä oltava selkeitä ja yksiselitteisiä. Myös ennakoitavuus on erittäin hyödyllistä. Näin käyttäjät voivat nopeasti tunnistaa, mitä heiltä vaaditaan. Selkeä ja järkevä rakenne on myös erittäin tärkeä. Samankaltaiset sisältöelementit voidaan ryhmitellä yhteen. Loogisesti erotetut yksiköt voidaan myös erottaa toisistaan visuaalisesti. Tämä helpottaa orientoitumista. Ne voidaan erottaa toisistaan myös värin avulla. On tärkeää, että vähimmäiskontrasti 4,5:1 säilyy.
Näppäimistön käytettävyys
Yksi lomakekenttien helppokäyttöisyyden kannalta tärkeimmistä ominaisuuksista on niiden käytettävyys näppäimistöllä. On ihmisiä, jotka eivät pysty käyttämään hiirtä vammansa vuoksi. Tämän vuoksi on entistäkin tärkeämpää suunnitella lomakkeet siten, että niissä voi navigoida myös näppäimistön avulla. Label-elementtien ja aria-attribuuttien käyttö helpottaa lomakkeiden ymmärtämistä ja käyttöä. Toinen tapa yksinkertaistaa käyttöä näppäimistön avulla on käyttää pikanäppäimiä. Lomake-elementteihin voidaan määrittää näppäinyhdistelmiä tässä. Tämä voi auttaa pääsemään nopeammin tiettyihin alueisiin tai käyttämään toimintoja nopeammin. HTML:ssä käytetään tähän tarkoitukseen accesskey-attribuuttia. Tämä attribuutti lisätään siihen elementtiin, johon sitä halutaan käyttää. Näppäimistökomentoon käytettävä näppäin yksinkertaisesti osoitetaan sinne. Jos esimerkiksi kenttään tai painikkeeseen annetaan n-näppäin, sitä voidaan käyttää Windowsissa pikanäppäimellä (Alt + n).
On kuitenkin tärkeää varmistaa, että tätä pikakuvaketta ei jo käytetä selaimessa toiseen komentoon.
Vähentäminen vähimmäismäärään
On myös suositeltavaa supistaa koko prosessi olennaisiin asioihin, jotta vammaisille ei aiheuteta tarpeetonta taakkaa. Sen vuoksi olisi pyydettävä vain ehdottoman välttämättömät tiedot. Olemassa olevia tietoja ei pitäisi pyytää. Lisäksi lomakekenttien näkyvyyttä voidaan mukauttaa tilanteen mukaan. Valinnaisten syöttökenttien tai ehtoihin liittyvien kenttien ei tarvitse olla näkyvissä. Ne voidaan näyttää, jos niitä tarvitaan. Ei esimerkiksi ole järkevää kysyä lasten ikää, jos olet aiemmin valinnut, että lapsia ei ole.
Ohje ja virheilmoitukset
Myös syöttöapua olisi tarjottava. Tämä voi tapahtua valintaikkunan tai vihjeen muodossa. Näiden avulla voidaan selittää syöttö yksityiskohtaisemmin. Toinen vaihtoehto olisi linkki erilliselle ohjesivulle. Tämä lisäisi onnistumisprosenttia huomattavasti. Virheitä sattuu silti. Merkitykselliset virheilmoitukset ovat silloin tärkeitä. Jos esimerkiksi salasana on syötetty väärin sisäänkirjautumisen yhteydessä, viesti "Käyttäjätunnus tai salasana on virheellinen" ei saisi näkyä. On parempi suodattaa virhe. Oikea tässä olisi: "Syöttämäsi salasana on virheellinen. Syötä oikea salasana".
Virheitä on erityyppisiä. Ensinnäkin muotovirhe. Tässä tapauksessa salasana on syötetty väärässä muodossa. Esimerkiksi kirjaimet syötetään numeroiden sijasta. Myös arvovirheitä voi esiintyä. Näin voi käydä, jos syötetään väärä arvo, vaikka muoto on oikea. Esimerkkinä tästä on, että päivämäärän päivälle syötetään arvo 34. Viesti kuuluisi tällöin seuraavasti: "Maaliskuussa on 31 päivää. Syötä päivä uudelleen".
Toinen virhetyyppi ovat virheelliset merkinnät. Tässä tapauksessa kehittäjä määrittää arvot, jotka eivät ole päteviä. Lopuksi on virhetyyppi, jos pakollisiin kenttiin ei ole tehty mitään merkintöjä. Tämä tapahtuu esimerkiksi, jos sähköpostiosoitekysely on pakollinen kenttä ja merkintä on unohtunut. Näin käy kuitenkin usein myös yleisten ehtojen kohdalla. Monilla verkkosivustoilla et voi jatkaa ilman, että hyväksyt tämän ilmoituksen.
Pakolliset kentät
Lomakkeet sisältävät usein pakollisia kenttiä. Ne on merkittävä sellaisiksi. Usein käytetty symboli pakollisen kentän merkitsemiseen on "*", joka näytetään lomakekentän vieressä. Tällöin lomakkeen alussa on kuitenkin ilmoitettava, että tähdellä merkityt kentät ovat pakollisia. Toinen vaihtoehto on näyttää nämä pakolliset kentät eri värillä tai sävyllä. Nämä eivät kuitenkaan ole kaikkien saatavilla. Jotta myös ruudunlukuohjelmien käyttäjät tunnistaisivat ne, olisi käytettävä myös required- tai aria-required-attribuuttia. Tämä ilmoittaa ruudunlukijalle, että kyseessä on pakollinen kenttä.
Paikanhaltija
Yksi tapa tehdä lomakkeista entistä helpommin ymmärrettäviä ja käyttäjäystävällisempiä on käyttää lomakekentissä paikanvaraajia. Paikanvartijat ovat tilapäisiä tekstejä, jotka näytetään lomakekentässä osoittamaan käyttäjälle, minkä tyyppistä tietoa pitäisi syöttää. Nämä tekstit häviävät heti, kun lomakekenttää napsautetaan tai siihen keskitytään, ja ne voidaan korvata lomakekentän varsinaisella sisällöllä. Paikannimet voidaan helposti lisätä lomakekentän HTML-syöttöelementtiin käyttämällä placeholder-attribuuttia.
Tallenna merkinnät
Kaikilla käyttäjillä pitäisi olla mahdollisuus tallentaa merkintöjään. Pidemmissä lomakkeissa on aina ongelmia. Tietojen menettämisen välttämiseksi ne voidaan tallentaa. Tätä tarkoitusta varten voidaan toteuttaa painike, joka tallentaa nykyisen tilan. Tämä helpottaa monimutkaisten lomakkeiden täyttämistä. Tästä on myös se etu, että puuttuvat merkinnät voidaan lisätä myöhemmin. Tämä johtuu siitä, että näiden merkintöjen toistaminen johtaa siihen, että jotkut käyttäjät eivät enää täytä lomaketta. Tämä voi olla ärsyttävää sekä verkkosivuston ylläpitäjälle että käyttäjälle.
Todentaminen ja aikaraja
Todentaminen lisää turvallisuutta Internetissä. Se on kuitenkin myös yksi niistä esteistä, jotka nousevat yhä uudelleen esiin. Niitä esiintyy usein verkkosivustoilla, joilla vaaditaan kirjautumista. Jotta nämä olisivat kuitenkin kaikkien saatavilla, lomakkeet on suunniteltava esteettömiksi. Monissa tapauksissa todennusmenettelyt ovat aikarajoitettuja. Silloin kirjautumiseen on vain hyvin vähän aikaa. Se on usein vain 30 tai 60 sekuntia. Monille vammaisille tämä aika ei riitä kirjautumiseen. Siksi on tärkeää, ettei kirjautumiselle aseteta aikarajoitusta.
Captchat aiheuttavat lisäongelman. Niitä käytetään tunnistamaan käyttäjä ihmiseksi eikä tietokoneeksi. Tässä tapauksessa käyttäjää pyydetään tunnistamaan vääristynyt kuva ja syöttämään tulos lomakekenttään. Usein on kuitenkin klikattava kaikkia kuvia, joissa näkyy esimerkiksi auto. Näihin ei kuitenkaan aina pääse käsiksi. Sokeat tai näkövammaiset eivät pysty tunnistamaan näitä kuvia. Tämän esteen voittamiseksi olisi tarjottava äänivaihtoehto.
Yhteenvetona voidaan todeta, että lomakekenttien esteetön suunnittelu on tärkeä askel kohti esteetöntä digitaalista ympäristöä. Oikea merkintä, selkeä ja jäsennelty ulkoasu sekä näppäimistön käyttö ja vastaavat virheilmoitukset lisäävät todennäköisyyttä, että myös vammaiset henkilöt pystyvät täyttämään lomakkeet itsenäisesti.
