Accessibility (a11y) veebis: kuidas teha koduleht kõigile kättesaadavaks

Miks accessibility?

• 15% rahvastikust on mingi puudega (WHO statistika)
• Õiguslik nõue EL-s (EAA – European Accessibility Act) jõustus 2025
• SEO eelis – Google premeerib ligipääsetavaid lehti
• Parem UX kõigile (mitte ainult puuetega)

WCAG 2.1 tasemed

EL nõuab AA taset avalikele teenustele alates 2025.

Põhi-checklist

Visuaalne - [ ] Värvikontrast 4.5:1 (tekst), 3:1 (UI) - [ ] Tekst suurendatav 200% ilma katki minemata - [ ] Pole ainult värvi peal info edastamine - [ ] Fookuse näitajad nähtavad

Klaviatuuri-navigatsioon - [ ] Kogu sait läbitav Tab-ga - [ ] Loogiline tab-järjekord - [ ] Skip to content link - [ ] Modal/dropdown sulgemine Esc-ga - [ ] Pole keyboard traps

Screen reader - [ ] Semantiline HTML (header, nav, main, footer) - [ ] Pealkirjad õiges hierarhias (H1 → H2 → H3) - [ ] Alt text kõigil sisukaartidel piltidel - [ ] aria-label nuppudel ilma tekstita - [ ] Vormiväljad sildiga (label)

Sisu - [ ] Lihtne keel (6-8. klass) - [ ] Link teksti selge - [ ] Pole "Loe siin" - [ ] Subtiitrid videodel - [ ] Transkriptid audioga

Levinud vead

1. Alt text puudub või vale ❌ `<img src="logo.png">` ❌ `<img src="logo.png" alt="pilt">` ✅ `<img src="logo.png" alt="Kodulehe Haldus logo">`

Dekoratiivsed pildid: alt="" (tühi).

2. Värv ainukese info edastajana ❌ "Kohustuslikud väljad punasega" ✅ "Kohustuslikud väljad punasega ja * tähisega"

3. Puuduv label ❌ `<input type="email" placeholder="E-post">` ✅ `<label for="email">E-post</label><input id="email" type="email">`

4. Klõpsatav div ❌ `<div onclick="...">Klõpsa</div>` ✅ `<button onclick="...">Klõpsa</button>`

5. Halb fookuse näitaja ❌ `*:focus { outline: none; }` ✅ `*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }`

Tööriistad

Automaattest - [axe DevTools](https://www.deque.com/axe/) – brauseri laiendus - [WAVE](https://wave.webaim.org/) – online test - [Lighthouse](https://developer.chrome.com/docs/lighthouse) – Chrome sisseehitatud - [Pa11y](https://pa11y.org/) – CLI

Manuaaltest - Klaviatuur ainult (eemalda hiir) - Screen reader: [NVDA](https://www.nvaccess.org/) (tasuta), VoiceOver (Mac), JAWS - Värvitundetuse simulaator

Vormide accessibility

<form>
  <div>
    <label for="name">Nimi *</label>
    <input id="name" type="text" required aria-describedby="name-help">
    <small id="name-help">Sisesta täisnimi</small>
  </div>

<div role="alert" aria-live="polite"> <!-- Veateated tulevad siia --> </div>

<button type="submit">Saada</button> </form> `

ARIA attribuudid

ARIA on screen reader'idele lisainformatsiooni. Kuld-reegel: kasuta semantilist HTML-i kõigepealt, ARIA-d ainult kui vajalik.

Levinumad: - aria-label: nupule, mis on ainult ikoon - aria-describedby: täiendav info - aria-hidden: peida screen readerist (dekoratsioon) - aria-live: dünaamilised teated - role: kohandatud komponentide semantika

Eesti seadusandlus

EAA – European Accessibility Act jõustus juuni 2025. Nõuab AA taset: - E-poodidel - Pangateenustel - Avalikel teenustel - Suhtlustaristul

Trahvid kuni 5000€/rikkumine.

SEO seos

Google premeerib accessibility-d: - Alt text → image search - Semantiline HTML → parem mõistmine - Mobile-friendly → ranking - Performance → Core Web Vitals

Vt ka tehniline SEO audit.

Kokkuvõte

Accessibility pole moes – see on õigus, vajadus ja äri-eelis. Pakume kodulehe disaini WCAG 2.1 AA standardile vastavalt. Küsi auditi pakkumist.

Allikad

• WCAG 2.1 Quick Reference
• European Accessibility Act
• WebAIM Million Report