Yksi neljästä yhdysvaltalaisesta aikuisesta elää jonkinlaisen vamman kanssa. Jos lomakkeesi ei ole esteetön, suljet ulos neljänneksen potentiaalisesta yleisöstäsi, ennen kuin he koskaan pääsevät lähetyspainikkeelle.
Esteetön lomake toimii kaikille. Se tarkoittaa pelkkää näppäimistöä käyttäviä. Ruudunlukijalla kuuntelevia. Heikkonäköisiä käyttäjiä. Ihmisiä, joilla on vapinaa ja jotka tarvitsevat lisäaikaa kenttien täyttämiseen. Ei erityistä suunnittelua, ei ylimääräistä monimutkaisuutta. Vain lomake, joka on rakennettu niin, että kaikki nämä ihmiset voivat oikeasti käyttää sitä.
Selkeät otsikot. Näppäimistönavigointi. Virheilmoitukset, jotka ruudunlukija osaa ilmoittaa. Riittävä kontrasti, jotta heikkonäköiset käyttäjät voivat lukea tekstin. Nämä eivät ole lisäominaisuuksia. Ne ovat perustaso, jota WCAG 2.1 AA ja Americans with Disabilities Act edellyttävät huhtikuusta 2026 alkaen.
Mikä tekee esteettömistä lomakkeista erilaisia
Ota mikä tahansa yhteydenottolomake, niin löydät samat virheet. Tekstikenttä, jossa on paikkamerkki mutta ei näkyvää otsikkoa. Valintaruutu, jonka tarkoitusta ei selitetä. Punaisella tekstillä kirjoitettu virheilmoitus, jota ruudunlukija ei osaa ilmoittaa.
Useimmat lomakkeet on rakennettu hiiren käyttäjille, ja esteettömyys lisätään myöhemmin jälkikäteen. Esteetön lomake toimii päinvastoin. Se olettaa alusta asti, että ihmiset käyttävät sitä eri tavoilla. Jotkut hiirellä, jotkut pelkällä näppäimistöllä. Jotkut lukevat sen, jotkut kuuntelevat ruudunlukijalla.
Se muuttaa tapaa, jolla lomake rakennetaan. Paikkamerkit ovat hyödyttömiä ilman otsikoita. Punaiset tähdet ovat hyödyttömiä ilman tekstiä. Visuaalinen asettelu, joka toimii hiiren käyttäjille, voi vangita näppäimistön käyttäjät. Esteetön lomake ei ole vaikeampi rakentaa. Se vaatii vain, että ajattelee vuorovaikutustapoja hiiren ulkopuolelta.
Miksi tällä on väliä
Lakisääteinen määräaika. ADAn Title II edellyttää WCAG 2.1 AA -tasoa 24. huhtikuuta 2026 mennessä. Vaatimustenvastaisuus ei ole enää riski. Se on nykyinen vastuu.
Liiketoiminnallinen vaikutus. Vammaiset kävijät käyttävät oikeaa rahaa. Esteetön lomake nostaa täyttöasteita kaikilla, koska selkeät otsikot auttavat kaikkia käyttäjiä, ei vain vammaisia. Kiireisiä käyttäjiä, jotka silmäilevät mobiilissa kuudelta aamulla. Tehokäyttäjiä, jotka liikkuvat näppäimistöllä. Kaikkia.
SEO-hyöty. Hakukoneet suosivat sivuja, joiden interaktiiviset elementit on nimetty ja joissa voi liikkua näppäimistöllä. Esteettömät lomakkeet sijoittuvat paremmin.
Mitä esteettömät lomakkeet oikeasti tarvitsevat
Näkyvät otsikot jokaisessa kentässä
Jokainen syöttökenttä tarvitsee otsikon. Ei paikkamerkkiä, joka katoaa. Ei title-attribuuttia. Oikean otsikon, joka on siinä sivulla.
Ruudunlukija lukee otsikon ensin ja ilmoittaa sitten kentän tyypin. "Nimi, tekstikenttä." Käyttäjä tietää, mitä tehdä. Ilman otsikkoa kuulet vain "tekstikenttä" etkä muuta. Käyttäjä ei tiedä, mitä kirjoittaa.
Näkeville käyttäjille otsikot toimivat samoin kuin paperilla. Ne kertovat, mitä kuhunkin tyhjään kohtaan kuuluu. Ne myös laajentavat klikattavaa aluetta. Yhdistä otsikko syöttökenttään for-attribuutilla, jolloin käyttäjät voivat klikata joko otsikkoa tai kenttää kohdistaakseen sen. Mobiilissa tällä isommalla napautuskohteella on väliä.
Toimi pelkällä näppäimistöllä
Moni ei koske hiireen koskaan. Motoriset vammat, heikko näkö, ruudunlukijat. Nämä käyttäjät liikkuvat kokonaan näppäimistöllä. Jos lomakkeesi vaatii hiiren, se ei ole esteetön.
Testaa se. Irrota hiiri. Liiku lomakkeessa vain Tab-näppäimellä, nuolinäppäimillä ja Enterillä. Sinun pitäisi päästä jokaiseen kenttään, valita jokainen vaihtoehto ja painaa lähetä liikuttamatta käsiäsi.
Kohdistuksen korostuksen on oltava näkyvä jokaisessa vaiheessa. Ei näkymättömiä kohdistustiloja. Käyttäjien täytyy tietää, missä kohdassa lomaketta he ovat. Ja tab-järjestyksellä on väliä. Kenttien pitäisi edetä vasemmalta oikealle ja ylhäältä alas, niin kuin lomake luetaan. Jos asettelusi hyppii tai piilottaa kenttiä, tab-järjestys rikkoutuu ja näppäimistön käyttäjät jäävät loukkuun.
Virheilmoitukset, jotka ilmoittavat itsensä
Punainen teksti lomakkeen yläreunassa ei merkitse mitään ruudunlukijan käyttäjälle. He lähettävät, kuulevat hiljaisuutta ja yrittävät uudelleen. Sitten he luovuttavat.
Yhdistä virhe siihen kenttään, jossa se tapahtui. Kun ruudunlukijan käyttäjä siirtyy tabilla siihen kenttään, virhe ilmoitetaan. Ja kirjoita virheilmoitus niin, että se kertoo, mitä korjata, ei pelkkää "Virheellinen". "Virheellinen syöte" sijaan sano "Sähköpostin pitää sisältää @-merkki."
Käytä ARIA-attribuutteja, kuten aria-describedby, yhdistääksesi virheilmoituksen kenttään. Kun kohdistus osuu kenttään, ruudunlukija ilmoittaa virheen automaattisesti. Ei arvailua.
Tee tekstistä luettavaa heikkonäköisille
Vaaleanharmaat otsikot valkoisella taustalla ovat näkymättömiä heikkonäköiselle. WCAG 2.1 AA edellyttää normaalille tekstille kontrastisuhdetta 4,5:1. Tumma teksti vaalealla taustalla tai vaalea teksti tummalla taustalla. Kontrastin pitää olla selvä.
Suuremmalle tekstille (18 pistettä tai enemmän) riittää 3:1-kontrasti. Kaikelle muulle tarvitaan 4,5:1. Kontrastintarkistustyökalu vie 5 sekuntia. Tarkista jokainen otsikko, painike ja virheilmoitus sellaisella ennen julkaisua.
Älä koskaan käytä pelkkää väriä pakollisten kenttien merkitsemiseen. Punainen tähti ei merkitse mitään värisokealle käyttäjälle. Lisää sana "pakollinen" kentän viereen. Ruudunlukijat ilmoittavat sen. Näkevät käyttäjät näkevät sen. Kaikki ymmärtävät tekstiä.
Esteettömien lomakkeiden ohjeet kenttä kerrallaan
Tekstikentät ja tekstialueet
Nimi, sähköposti, puhelin: kaikki tarvitsevat otsikon suoraan yläpuolelleen tai viereensä. Käytä HTML-elementtiä <label> ja for-attribuuttia, joka vastaa syöttökentän id-arvoa.
Jos kenttä odottaa tiettyä muotoa, sano se. "Muoto: 555-123-4567" auttaa kaikkia, erityisesti ihmisiä, jotka toimivat paremmin selkeiden ohjeiden kanssa.
Tekstialueiden pitäisi näyttää siltä, että ne hyväksyvät pidempiä vastauksia. Yhden rivin laatikko, jonka otsikko on "Viesti", tuntuu nopealta vastaukselta. Korkeampi laatikko viestii "kerro enemmän". Koolla on väliä.
Pudotusvalikot ja valintapainikkeet
Jokainen pudotusvalikko tarvitsee otsikon. "Valitse vaihtoehto" ja "Kyllä/Ei" ilman asiayhteyttä ovat hyödyttömiä. Ruudunlukijan käyttäjä ei tiedä, mitä kysyt. Tee pudotusvalikon otsikosta selvä siitä, mistä valinnasta on kyse.
Valintapainikkeiden pitäisi olla fieldset-elementissä, jolla on legend. Legend esittää kysymyksen. Vaihtoehdot vastaavat siihen. "Mikä kuvaa parhaiten käyttötarkoitustasi?" ja vaihtoehdot "Verkkokauppa", "Media", "SaaS". Ruudunlukija ilmoittaa legendin ja sitten jokaisen vaihtoehdon. Käyttäjä ymmärtää valitsevansa ryhmästä ja mihin ryhmä liittyy.
Valintaruudut
Valintaruudun otsikon pitäisi kuulostaa luontevalta. "Hyväksyn käyttöehdot" otsikkona ja valintaruutu sen vieressä. Ei alastonta valintaruutua ilman tekstiä, jolloin käyttäjät joutuvat arvaamaan, mitä se tekee.
Jos on täydentävää tietoa, kuten linkki täysiin ehtoihin, laita se suoraan valintaruudun viereen. Älä piilota sitä. Käyttäjien täytyy tietää, mihin he suostuvat, ennen kuin he rastittavat ruudun.
Valintaruuturyhmät toimivat kuten valintapainikeryhmät. Legend nimeää ryhmän ja jokaisella vaihtoehdolla on oma otsikkonsa.
Painikkeet
Painikkeen tekstin pitäisi kertoa, mitä tapahtuu. "Lähetä." "Lähetä viesti." "OK" sopii vahvistuksiin. "Mene" ei sovi. Ei yleisiä otsikoita.
Jos painikkeita on useita, tee niistä erilaisia. "Peruuta" ja "Lähetä" ovat selkeitä. Kaksi painiketta, jotka molemmat sanovat "Seuraava", eivät ole, koska ruudunlukijan käyttäjä kuulee "seuraava-painike, seuraava-painike" eikä tiedä, kumpi on kumpi.
Missä lomakkeet ovat sivustollasi
Yhteydenottolomakkeet ponnahdusikkunoissa. Uutiskirjeen tilaukset alatunnisteissa. Lahjoituslomakkeet tehtäväsivuilla. Kyselylomakkeet kassalla. Jokaisen lomakkeen, missä tahansa, pitää olla esteetön.
Ponnahdusikkunalomakkeet luovat kohdistusloukun, jos et hallitse sitä. Kun modaali avautuu, kohdistus siirtyy siihen. Kun se sulkeutuu, kohdistus palaa painikkeeseen, joka sen avasi. Ilman tätä näppäimistön käyttäjät jäävät tabuttamaan taustasivun läpi.
Pitkillä sivuilla, joilla lomake on alempana, lisää ohituslinkki. Näppäimistön käyttäjien ei pitäisi joutua tabuttamaan 50 navigointikohdan läpi päästäkseen lomakkeeseesi.
Yleiset virheet
Paikkamerkkitekstin käyttö otsikoiden sijaan
Paikkamerkki "Kirjoita sähköpostisi" katoaa heti, kun joku alkaa kirjoittaa. Nyt käyttäjä ei tiedä, mihin kenttä oli tarkoitettu. Ruudunlukijat eivät näe sitä lainkaan.
Käytä oikeaa otsikkoa. Jos haluat paikkamerkin muotovihjeitä varten, se käy. Mutta älä koskaan käytä sitä itse otsikkona.
Pelkän värin käyttö pakollisissa kentissä
Punainen tähti on näkymätön värisokeille käyttäjille. Kuvake on näkymätön ruudunlukijoille. Käytä sanaa "pakollinen" tekstinä. Kaikki ymmärtävät tekstiä.
Käsin testaamisen ohittaminen
Oikea HTML-rakenne paperilla ei tarkoita, että lomakkeesi toimii käytännössä. Otsikot voivat olla liian kaukana syöttökentistä. Kohdistuksen korostukset voivat olla näkymättömiä. Virheilmoitukset voivat kuulua, mutta eivät siirrä kohdistusta kenttään.
Testaa näppäimistöllä. Testaa ruudunlukijalla. Joitakin ruudunlukijoita saa ilmaiseksi, osa on alan vakiotyökaluja, ja iOS:llä testatessa käytössä on järjestelmän oma ruudunlukija. Automaattiset tarkistimet löytävät ilmeiset ongelmat. Oikea testaus löytää loput.
Aikarajojen lisääminen
Käyttäjä, jolla on vapinaa, kirjoittaa hitaasti. Ruudunlukijan käyttäjä tarvitsee aikaa kuunnellakseen kaikki otsikot ja ohjeet. 5 minuutin raja jättää ulos käyttäjät, jotka tarvitsevat 10.
Poista aikarajat, jos voit. Jos niitä pitää olla, anna käyttäjien jatkaa aikaa kahdesti ennen istunnon päättymistä.
Miten WEMASY rakentaa esteettömiä lomakkeita
WEMASYn lomakkeet on rakennettu esteettömiksi alusta asti, ei jälkikäteen. Jokaisessa pohjassa on kunnolliset otsikot. Kohdistusta hallitaan automaattisesti. Virheet ilmoitetaan ruudunlukijoille. Värikontrasti täyttää WCAG 2.1 AA -vaatimuksen oletuksena.
Mukauta rikkomatta esteettömyyttä. Lisää kenttiä, vaihda otsikoita, järjestä asettelu uudelleen. Taustalla oleva rakenne pysyy esteettömänä. Sisäänrakennettu tarkistus ilmoittaa virheet ruudunlukijoille.
Lue lisää täydellisestä lomakeoppaastamme tai katso, mitä jokaiseen WEMASY-tilaukseen sisältyy.