🎉 Uusi työkalu: Yksinkertainen kieli. Klikkaa painiketta ja kokeile sitä livenä

Miten lomake-elementit suunnitellaan esteettömiksi?

Nuori nainen istuu hämmentyneenä kannettavan tietokoneen ääressä.

Jaa viesti:

Nuori nainen istuu hämmentyneenä kannettavan tietokoneen ääressä.

Miten lomake-elementit suunnitellaan esteettömiksi?

Jaa tämä viesti:

Nuori nainen istuu hämmentyneenä kannettavan tietokoneen ääressä.

Kaikki ovat jossain vaiheessa joutuneet käsittelemään lomakkeita. Aiemmin enemmän paperilla. Nykyään ne ovat yhä enemmän digitaalisia lomakkeita, koska ne palvelevat käyttäjän vuorovaikutusta verkkosivuston kanssa. Lomakkeita on kaikkialla, olipa kyse sitten viestinnästä internetissä tai tavaran tilaamisesta. Myös internetissä, esimerkiksi Googlella, tapahtuva haku vaikuttaa. Lomakkeiden täyttäminen on vaikeampaa henkilöille, joilla on fyysisiä tai jopa kognitiivisia vammoja, sekä sokeille ja näkövammaisille. Jotta kaikki ihmiset 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 tekniikoita käsitellään, on kuitenkin tunnettava lomake-elementit. Ne voidaan jakaa eri tyyppeihin. Muun muassa seuraavat tyypit

  • Yksiriviset syöttökentät
  • moniriviset syöttöalueet
  • Listalle
  • Radiopainikkeet
  • Valintaruudut
  • Lähetä/peruuta-painikkeet

Lomakekenttien merkinnät

Jotta lomakkeet olisivat saavutettavia, eri hallintalaitteet 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 ottamaan yhteyttä elementteihin. Tämän seurauksena käyttäjillä on vaikeuksia ymmärtää lomaketta. He eivät näe, mitä tietoja mihinkin kenttiin on syötettävä. Tämän seurauksena he eivät pysty täyttämään lomaketta oikein ja tekevät usein virheitä. Kuvauksia ei kuitenkaan ole kaikissa 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 ohjauselementtien eteen. Radiopainikkeiden ja valintaruutujen kohdalla ne sijoitetaan kuitenkin ohjauselementin jälkeen. Jotta tarrat voidaan linkittää vastaavaan elementtiin, on lisättävä for-attribuutti.

 

Aria-attribuuttia käytetään HTML:ssä painikkeissa. Painikkeet voivat esimerkiksi edustaa lomakkeen lähetystä tai peruutusta. Aria-attribuuttien avulla vastaavien elementtien kuvaukset tulevat tunnistettaviksi 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 paikan kyselyyn.

Ne luodaan HTML:ssä input-Tag ja type-attribuutin avulla.

Lisäksi voidaan lisätä muita attribuutteja, kuten viivan pituuden määrittely.

Monirivisiä kenttiä käytetään yleensä suurempiin tekstialueisiin, kuten tekstiviesteihin. Nämä luodaan textarea-Tag -kentällä. Tässäkin kehittäjä voi määrittää rivien määrän ja rivin pituuden. Jotta nämä kentät olisivat esteettömästi käytettävissä, on kuitenkin vielä lisättävä label-Tag . Etiketin ja elementtien välille ei kuitenkaan voida luoda yhteyttä, jos niitä ei ole selkeästi määritetty. Ne on tällöin yhdistettävä for- ja id-attribuuttien avulla. Seuraavassa HTML-esimerkissä tällaisiin syöttökenttiin on toteutettu yksinkertaisia tarroja.

 

<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>

 

Ensin luodaan yksirivinen syöttökenttä etunimelle, jonka tyyppi on "text". Otsikko "Etunimesi:" tehdään näkyväksi kaikille label-elementillä. Tämä sijoitetaan input-elementin eteen, koska se tulostetaan ennen input-kenttää. Label-elementinTag for-attribuutti ja input-elementin id-attribuutti yhdistävät nämä alueet toisiinsa. On tärkeää, että molempien sisältö on identtinen, muuten niitä ei voi yhdistää. name-attribuutti toimii kentän tunnisteena, ja sitä tarvitaan tietojen siirtämiseen palvelinsivulle.

Seuraavaksi luodaan monirivinen syöttöalue osoitteella Tag "textarea". Tämän jälkeen label-elementin kautta tulee näkyviin merkintä "Viestisi:". Tässäkin tapauksessa kaksi aluetta, joilla on sama tekstisisältö, liitetään toisiinsa attribuuttien for ja id avulla.

Yleisiä huomautuksia

Lomakkeiden on yleensä oltava selkeitä ja yksiselitteisiä. Myös ennakoitavuus on erittäin hyödyllistä. Näin käyttäjät näkevät nopeasti, mitä heiltä vaaditaan. Selkeä ja järkevä rakenne on myös erittäin tärkeä. Samankaltaiset sisältöelementit voidaan ryhmitellä yhteen. Loogisesti erilliset yksiköt voidaan myös erottaa toisistaan visuaalisesti. Tämä helpottaa orientoitumista. Lisäksi ne voidaan erottaa toisistaan värillä. 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 käytettävyys näppäimistöllä. On ihmisiä, jotka eivät pysty käyttämään hiirtä vammansa vuoksi. Siksi on entistäkin tärkeämpää suunnitella lomakkeet siten, että niitä voi käyttää myös näppäimistöllä. Label-elementtien ja aria-attribuuttien käyttö helpottaa lomakkeiden ymmärtämistä ja käyttöä. Toinen tapa yksinkertaistaa käyttöä näppäimistöllä on käyttää pikanäppäimiä. Tässä lomakkeen elementteihin voidaan tallentaa näppäimistön pikavalintoja. Tämä voi auttaa pääsemään tiettyihin alueisiin nopeammin 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ää. Siihen annetaan yksinkertaisesti näppäin, jota käytetään näppäinkomentoon. Jos esimerkiksi kentälle tai painikkeelle annetaan näppäin "n", sitä voidaan käyttää Windowsissa pikanäppäimellä (Alt + n).

On kuitenkin varmistettava, ettei tätä pikanäppäintä käytetä jo johonkin toiseen komentoon selaimessa.

Vähentäminen vähimmäismäärään

On myös suositeltavaa supistaa koko asia olennaisiin asioihin, jotta vammaisia ei rasiteta tarpeettomasti. Siksi olisi pyydettävä vain ehdottoman välttämättömät tiedot. Jo olemassa olevien tietojen pyytämisestä olisi luovuttava. 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ää, kun niitä tarvitaan. Esimerkiksi lasten iän kysyminen ei ole mielekästä, jos aiemmin on valittu, että lapsia ei ole.

Ohje ja virheilmoitukset

Lisäksi olisi tarjottava syöttöapua. Tämä voi tapahtua valintaikkunan tai työkaluvihjeen muodossa. Niiden avulla syöttö voidaan selittää tarkemmin. Toinen mahdollisuus olisi linkki erilliselle ohjesivulle. Tämä lisäisi onnistumisprosenttia valtavasti. Virheitä sattuu silti. On tärkeää antaa mielekkäitä virheilmoituksia. 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ötetty salasana ei ole oikea. Syötä oikea salasana". 

Virheitä on erityyppisiä. Ensimmäinen on 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 tapahtua, jos syötetään väärä arvo huolimatta oikeasta muodosta. Esimerkkinä tästä on, että päivämäärän Tag arvoksi syötetään 34. Viestissä lukee tällöin esimerkiksi: "Maaliskuussa on 31 päivää. Syötä Tag uudelleen".

Toinen virhetyyppi on virheellinen syöttö. Tässä tapauksessa kehittäjä antaa arvoja, jotka eivät ole sallittuja. Lopuksi on olemassa virhetyyppi, jossa pakollisiin kenttiin ei ole tehty mitään merkintöjä. Näin käy esimerkiksi silloin, kun sähköpostiosoite on pakollinen kenttä ja sen syöttäminen unohtui. Tätä tapahtuu kuitenkin usein myös yleisten sopimusehtojen kohdalla. Monilla verkkosivustoilla et voi jatkaa toimintaa hyväksymättä tätä lausumaa.

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 on kuitenkin jo lomakkeen alussa huomautettava, että tähdellä merkityt kentät ovat pakollisia kenttiä. Toinen mahdollisuus on näyttää nämä pakolliset kentät eri värillä tai varjostuksella. Nämä eivät kuitenkaan ole kaikkien käytettävissä. Jotta myös ruudunlukuohjelmien käyttäjät tunnistaisivat ne, olisi käytettävä myös attribuuttia required tai aria-required. Tämä kertoo ruudunlukijalle, että kyseessä on pakollinen kenttä.

Paikanhaltija

Yksi tapa tehdä lomakkeista entistäkin ymmärrettävämpiä ja käyttäjäystävällisempiä on käyttää lomakekentissä sijoitussalpaajia. Paikanvartijat ovat tilapäisiä tekstejä, jotka näytetään lomakekentässä osoittamaan käyttäjälle, millaista 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

Kaikkien käyttäjien pitäisi pystyä tallentamaan tietonsa. Ongelmia esiintyy yhä uudelleen pidempien lomakkeiden kanssa. Tietojen menettämisen välttämiseksi ne voidaan tallentaa. Tätä tarkoitusta varten voidaan toteuttaa painike, joka tallentaa nykyisen tilan. Tämä helpottaa sitten monimutkaisten lomakkeiden täyttämistä. Tästä on myös se etu, että puuttuvat merkinnät voidaan täydentää myöhemmin. Tämä johtuu siitä, että näiden merkintöjen toistaminen johtaa siihen, että jotkut käyttäjät eivät jatka lomakkeen täyttämistä. Tämä voi olla ärsyttävää sekä verkkosivuston ylläpitäjälle että käyttäjälle.

Todentaminen ja aikaraja

Todentaminen lisää turvallisuutta internetissä. Mutta se on myös yksi esteistä, jotka nousevat esiin yhä uudelleen. Niitä esiintyy usein verkkosivustoilla, joilla vaaditaan kirjautumista. Mutta jotta ne olisivat kaikkien saatavilla, lomakkeet on suunniteltava esteettömiksi. Tämä johtuu siitä, että monissa tapauksissa tunnistautumismenettelyt ovat aikarajoitettuja. Ihmisillä on silloin hyvin vähän aikaa kirjautua sisään. Usein aikaa on vain 30 tai 60 sekuntia. Monille vammaisille tämä aika ei riitä kirjautumiseen. Siksi on tärkeää, ettei sisäänpääsyä rajoiteta ajallisesti.

Captchat aiheuttavat toisen 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, esimerkiksi niitä, joissa näkyy auto. Nämä eivät kuitenkaan aina ole esteettömiä. Sokeat tai näkövammaiset henkilöt eivät pysty tunnistamaan näitä kuvia. Tämän esteen kiertämiseksi olisi tarjottava äänivaihtoehto.

 

Yhteenvetona voidaan todeta, että lomakekenttien esteetön suunnittelu on tärkeä askel kohti esteetöntä digitaalista ympäristöä. Oikeiden nimitysten, selkeän ja jäsennellyn ulkoasun sekä näppäimistön ja vastaavien virheilmoitusten käyttö lisäävät todennäköisyyttä, että myös vammaiset henkilöt pystyvät täyttämään lomakkeet itsenäisesti.

Helppoa kaikille

Kiinnostunut? Autamme sinua mielellämme.

Yli 25 digitaalisen saavutettavuuden ympärillä olevaa toimintoa auttaa Eye-Able auttaa sinua myös vähentämään esteitäsi kestävästi. Näin tuot tietosi kaikkien saataville etkä sulje kävijöitä pois – lyhyesti: Avaat uuden kohderyhmän ilman suuria markkinointivolyymeja.

Kuvake näyttää helppokäyttöisyysluvun

Konsultaatio

Ei-sitova kuuleminen digitaalisesta saavutettavuudesta yleensä

Kuvake näyttää helppokäyttöisyysluvun

Analyysi

Keskustelu mahdollisista optimointimahdollisuuksista verkkosivustollasi

Kuvake näyttää helppokäyttöisyysluvun

Live-esittely

Tukiohjelmiston esittely suoraan verkkosivustollasi

Lisää artikkeleita

Jos haluat jotain enemmän: