Ligipääsetavad veebivormid: WCAG nõuded ja parimad praktikad
Tahad teada, kuidas sinu enda leht seisab?
Küsi tasuta audititKontaktvormid, ostukorvid ja registreerimine – kuidas teha vormid, mis töötavad ekraanilugejaga ja täidavad WCAG 2.2 AA nõuded.
Autor: Meiko Neuman
Asutaja ja veebistrateeg, Kodulehe Haldus
Miks vormid on kriitilised?
Vormid on kõige sagedasem konversiooni punkt – kontakt, ost, registreerimine. Kui vorm ei ole ligipääsetav, kaotad mitte ainult puuetega kasutajad, vaid ka 15-20% kõigist mobiilikasutajatest (Baymard Institute).
10 WCAG nõuet vormidele
1. Igal väljal peab olema silt ```html <!-- ✓ Õige --> <label for="email">E-post</label> <input id="email" type="email">
<!-- ✗ Vale -->
<input placeholder="E-post">
`
Placeholder ei ole silt. Kui kasutaja hakkab kirjutama, kaob ka kontekst.
2. Seosta veateated väljaga ```html <input id="email" aria-describedby="email-error" aria-invalid="true"> <span id="email-error">Palun sisesta korrektne e-posti aadress</span> ```
3. Ära kasuta värvi ainsa indikaatorina Punane raam ei piisa – lisa ikoon ja tekst.
4. Grupeeri seotud väljad ```html <fieldset> <legend>Arve aadress</legend> <!-- väljad --> </fieldset> ```
5. Anna piisavalt aega Kui vormil on ajalimiit (nt pangalingid), peab kasutaja saama seda pikendada.
6. Ära nõua duplikaate (WCAG 2.2 uus) Kui kasutaja sisestas e-posti registreerimisel, eeltäida see ka kontakti väljale.
7. Sisselogimine ilma kognitiivse testita (WCAG 2.2 uus) CAPTCHA, mis nõuab piltidelt liiklustulesid otsima, on välistatud. Kasuta: - [hCaptcha Accessibility](https://www.hcaptcha.com/accessibility) - Magic link (e-postiga) - WebAuthn / passkeyd
8. Vajutuspinna suurus Nupud ja checkboxid vähemalt **24×24 pikslit** (WCAG 2.2), soovitavalt 44×44 (Apple HIG).
9. Klaviatuuri tugi Iga väli, nupp, checkbox peab olema Tab-iga ligipääsetav. Custom dropdown-id (`<div>`) on sageli broken.
10. Edu sõnum ekraanilugejale ```html <div role="status" aria-live="polite"> Aitäh! Sõnum on saadetud. </div> ```
Eesti spetsiifilised vead
- Isikukood – luba mõlemad, 11 numbrit ja vahedega vorming
- Telefoninumber – aktsepteeri +372, 372, või lihtsalt 7 numbrit
- Aadressi otsing – ära nõua kasutajalt Maa-ameti API tundmist
Tööriistad testimiseks
- WAVE – kiire ülevaade
- NVDA (Windows, tasuta) – ekraanilugeja
- VoiceOver (Mac/iOS, sisseehitatud)
- axe DevTools – detailsed soovitused
Edasi lugemiseks
Vajad abi vormide auditiga? Vaata kodulehe haldus teenust.
Vajad abi oma kodulehega?
Meie meeskond hooldab, optimeerib ja kaitseb sinu kodulehte. Hinna lepime kokku mahu järgi.
Küsi pakkumistArtikli autor
Meiko Neuman — Asutaja ja veebistrateeg, Kodulehe Haldus. Meiko juhib Kodulehehalduse tiimi ja on üle kümne aasta aidanud Eesti ettevõtetel kodulehti hallata, optimeerida ja müügitulemusi parandada. Kirjutab kodulehe haldusest, SEO-st, AEO/GEO-st ja veebi ärilisest poolest.