Saavutettavat yhteydenottolomakkeet ja eurooppalainen esteettömyyssäädös

Yhteydenottolomake on usein ainoa ovi kävijän ja yrityksesi välillä. Jos oven voi avata vain hiirellä, hyvällä näöllä ja kärsivällisyydellä ratkaista sumea kuvatehtävä, osa ihmisistä jää yksinkertaisesti ulkopuolelle. Vuoden 2025 puolivälistä lähtien tämä ei ole enää pelkkä käytettävyyskysymys: monille kuluttajille EU:ssa myyville yrityksille siitä on tullut oikeudellinen kysymys.

Mitä eurooppalainen esteettömyyssäädös kattaa

Eurooppalaista esteettömyyssäädöstä (direktiivi (EU) 2019/882) on sovellettu 28. kesäkuuta 2025 alkaen. Se asettaa esteettömyysvaatimuksia tietyille kuluttajille tarjottaville tuotteille ja palveluille – muun muassa sähköiselle kaupankäynnille, kuluttajapankkipalveluille, e-kirjoille, sähköiselle viestinnälle ja osalle henkilöliikennettä. Verkkosivuston kohdalla tämä tarkoittaa verkkokauppaa tai pankkipalvelua kokonaisuutena, mukaan lukien lomakkeet, joilla asiakkaat ottavat sinuun yhteyttä, esittävät kysymyksiä tai tekevät reklamaatioita. Palveluja tarjoavat mikroyritykset on vapautettu: yritykset, joilla on alle kymmenen työntekijää ja joiden vuosiliikevaihto tai taseen loppusumma on enintään 2 miljoonaa euroa. Pelkästään muille yrityksille suunnatut tarjoukset jäävät yleensä soveltamisalan ulkopuolelle.

Jokainen jäsenvaltio on saattanut direktiivin osaksi kansallista lainsäädäntöään. Saksassa se on Barrierefreiheitsstärkungsgesetz (BFSG), Puolassa vuonna 2024 annettu laki tiettyjen tuotteiden ja palvelujen esteettömyysvaatimusten täyttämisen varmistamisesta. Valvontaviranomaiset ja seuraamukset vaihtelevat maittain, mutta tekninen mittapuu on pitkälti sama: käytännössä eurooppalainen standardi EN 301 549, joka puolestaan perustuu verkkosisällön saavutettavuusohjeisiin (WCAG).

Miksi se kannattaa myös ilman lakisääteistä velvollisuutta

Ehkä yrityksesi on vapautettu, tai palvelet vain muita yrityksiä. Saavutettavat lomakkeet kannattavat silti yksinkertaisesta syystä: jokainen puolivälissä luovuttava ihminen on yhteydenotto, jota et koskaan saa. Korjaukset, jotka auttavat ruudunlukijan käyttäjää, auttavat myös sitä, joka täyttää lomaketta puhelimella junassa, kirkkaassa auringonpaisteessa, ranne murtuneena tai toisella kielellä. Selkeät nimiöt ja hyödylliset virheilmoitukset tarkoittavat vähemmän keskeytettyjä lomakkeita kaikille – eikä mikään niistä heikennä roskapostisuojaustasi.

Käytännön tarkistuslista WCAG 2.2 -viittauksin

• Näkyvät nimiöt, jotka on liitetty kenttiinsä (1.3.1, 3.3.2): jokaisella kentällä on näkyvä nimiö, joka on liitetty siihen for/id-määritteillä. Pelkkä paikkamerkkiteksti ei ole nimiö – se katoaa heti, kun joku alkaa kirjoittaa.
• Virheilmoitukset, jotka kertovat korjauksen (3.3.1, 3.3.3): nimeä kenttä, kerro mikä on vialla ja miten se korjataan – tekstinä, ei pelkästään punaisella reunuksella. ”Anna sähköpostiosoite muodossa nimi@example.com” on parempi kuin ”Virheellinen syöte”.
• Täysi näppäimistökäyttö (2.1.1, 2.1.2): jokaiseen kenttään, valintaruutuun, CAPTCHAan ja lähetyspainikkeeseen pääsee ja niitä voi käyttää sarkain-, väli- ja Enter-näppäimellä ilman näppäimistöansoja.
• Näkyvä kohdistus (2.4.7): aina näkee, mikä kenttä on aktiivinen. Selaimen kohdistuskehyksen poistaminen ilman korvaavaa ratkaisua ei täytä tätä kriteeriä.
• Riittävä kontrasti (1.4.3): tekstin, nimiöiden ja virheilmoitusten kontrastisuhde taustaan on vähintään 4,5:1 (suurella tekstillä 3:1).
• Kohteen koko (2.5.8): painikkeet, valintaruudut ja linkit ovat vähintään 24 × 24 CSS-pikseliä, tai niiden ympärillä on riittävästi tilaa.
• CAPTCHA-vaihtoehdot (1.1.1) ja saavutettava todentaminen (3.3.8): 1.1.1 edellyttää tekstivastinetta ja CAPTCHAa useammassa kuin yhdessä aistimuodossa; 3.3.8 koskee tarkkaan ottaen kirjautumisvaiheita, mutta sen ajatus pätee laajemminkin – tehtävä, kuten vääristettyjen kirjainten kirjoittaminen uudelleen tai laskutoimituksen ratkaiseminen, ei saisi olla ainoa tapa päästä eteenpäin. Tarjoa vaihtoehto tai käytä menetelmää, joka ei vaadi tehtävää lainkaan.
• Avustavilta teknologioilta piilotetut honeypotit: ansakentän ympäröivä elementti saa määritteen aria-hidden="true" ja kenttä tabindex="-1", jotta ruudunlukijan ja näppäimistön käyttäjät eivät koskaan päädy siihen.

CAPTCHAt ja honeypotit: missä roskapostisuojaus kohtaa saavutettavuuden

Tarkkaan ottaen kriteeri 3.3.8 koskee kirjautumis- ja todentamisvaiheita, ei yhteydenottolomakkeita. Sen taustalla oleva ajatus pätee kuitenkin hyvin: vääristettyjen kirjainten kirjoittaminen, laskutoimituksen ratkaiseminen tai liikennevalojen valitseminen kuvaruudukosta sulkee osan ihmisistä kokonaan ulos. Vaihtoehdot, jotka toimivat yleensä ilman mitään tehtävää – kuten Cloudflare Turnstile, Friendly Captcha, honeypot yhdistettynä aikatarkistukseen tai palvelinpuolen suodatus, kuten Akismet – pitävät roskapostin poissa vaatimatta kävijöitä todistamaan mitään. Honeypot on ystävällinen vain, jos se on todella näkymätön, myös ruudunlukijoille ja näppäimistön käyttäjille:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Jätä tämä kenttä tyhjäksi</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Testaa oma lomakkeesi viidessätoista minuutissa

1. 1Laita hiiri sivuun ja täytä koko lomake pelkällä näppäimistöllä. Pääsetkö jokaiseen kenttään ja lähetyspainikkeeseen, ja näetkö aina, missä olet?
2. 2Lähetä lomake tyhjänä ja sitten virheellisellä sähköpostiosoitteella. Näkyvätkö virheet tekstinä oikean kentän vieressä, ja onko selvää, mitä pitää tehdä?
3. 3Avaa sivu puhelimella tai suurenna selaimen näkymä 200 %:iin. Onko kaikki luettavissa, ovatko painikkeet helppo napauttaa, ja peittääkö evästebanneri tai chat-widget lähetyspainikkeen?
4. 4Ota ruudunlukija käyttöön (VoiceOver, NVDA tai TalkBack) ja kuuntele: luetaanko jokainen kenttä nimiöineen, ja pysyykö honeypot hiljaa?
5. 5Suorita automaattinen tarkistus, kuten axe-core. Se löytää puuttuvat nimiöt ja kontrastiongelmat nopeasti, mutta ei kaikkea – edellä kuvatut manuaaliset vaiheet ovat edelleen tarpeen.

Jos haluat mieluummin aloittaa yleiskatsauksesta, formexposed tarkastelee julkisia lomakkeitasi ulkopuolelta lähettämättä mitään. Sen saavutettavuustarkistukset ajavat axe-coren jokaiselle lomakkeelle, merkitsevät CAPTCHAt, joilla ei ole saavutettavaa vaihtoehtoa, ja honeypotit, jotka ruudunlukijat lukevat ääneen, sekä tarkastelevat lomaketta puhelimella – kosketuskohteet, lähetyspainikkeen peittävät päällekkäiset elementit, vaakavieritys. Maksuton tarkistus näyttää kokonaistason; nämä yksityiskohdat ovat täydellisessä raportissa. Se on hyvä lähtökohta edellä olevalle listalle, ei korvaa testaamista oikeiden ihmisten kanssa.