Tagasi blogisse
    Päisepilt artiklile „WCAG audit: 12-sammuline juhend, kuidas oma kodulehte testida"
    WCAG & GDPR vastavus8.6.20269 min

    WCAG audit: 12-sammuline juhend, kuidas oma kodulehte testida

    Tahad teada, kuidas sinu enda leht seisab?

    Küsi tasuta auditit

    Praktiline tegevuskava ligipääsetavuse auditiks – tasuta tööriistad, manuaalne testimine ja kõige sagedasemad vead Eesti lehtedel.

    Autor: Meiko Neuman

    Asutaja ja veebistrateeg, Kodulehe Haldus

    Miks audit on vajalik?

    WebAIM Million 2024 uuringu järgi on 95,9% maailma populaarsematest kodulehtedest WCAG nõuetele mittevastavad. Keskmiselt 56,8 viga ühe lehe kohta. Tõenäosus, et ka sinu leht on probleemne, on väga suur.

    12-sammuline audit

    1. Automaatne skann Kasuta [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/) ja [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/). Need püüavad ~30% vigadest.

    2. Värvi kontrast Iga teksti/tausta paar peab vastama: - Tavaline tekst: **4.5:1** - Suur tekst (≥18pt): **3:1** - UI elemendid ja graafika: **3:1**

    Tööriist: Contrast Checker.

    3. Klaviatuuri navigatsioon Sulge hiir ja proovi Tab-iga läbi kogu lehe. Kontrolli: - Kas fookus on alati nähtav? - Kas saad menüüsse, modaalidesse, vormidesse? - Kas saad nendest välja ESC-ga?

    4. Alt-tekstid Iga sisukas pilt vajab `alt=""` atribuuti. Dekoratiivsed pildid: `alt=""` (tühi). Loe meie [piltide optimeerimise juhend](/blogi/piltide-optimeerimine-veebis).

    5. Pealkirjade hierarhia Üks `<h1>` lehe kohta. Ära hüppa h2-lt h4-le. Kasuta [HeadingsMap](https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi) laiendust.

    6. Vormi sildid Iga `<input>` vajab seotud `<label>` või `aria-label`. Veateated peavad olema selged ja seotud väljaga (`aria-describedby`).

    7. ARIA atribuudid Ära kuritarvita. Reegel: "no ARIA is better than bad ARIA" ([W3C](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)).

    8. Liikumine ja animatsioonid Kõik animatsioonid pikemad kui 5s peavad olema peatatavad. Austa `prefers-reduced-motion`.

    9. Video ja heli Subtiitrid videoele, transkriptsioon podcastidele. Autoplay heliga keelatud.

    10. Fookuse järjekord Tab-järjekord peab vastama visuaalsele järjekorrale. Väldi positiivseid `tabindex` väärtusi.

    11. Mobiilne ligipääsetavus - Klikitavad alad ≥ 24×24 px (WCAG 2.2) - Suumimine ei tohi olla blokeeritud - Ekraanilugeja test (VoiceOver iOS, TalkBack Android)

    12. Päris kasutajatega test Tööriistad püüavad max 50% probleemidest. [Deque uuringu](https://www.deque.com/blog/) järgi leiavad päris kasutajad ülejäänud 50%+.

    Kõige sagedasemad vead Eesti lehtedel

    Meie praktikas (200+ auditit):

    1. Madal kontrast – 89% lehtedest
    2. Puudulikud alt-tekstid – 76%
    3. Vormide sildid puudu – 61%
    4. Klaviatuuriga ei pääse menüüsse – 54%
    5. Tühi link-tekst ("loe edasi") – 48%
    6. Küpsiseteate fookuse lõks – 42%

    Mida edasi?

    Audit ilma parandusteta on raha visiks. Tee tegevusplaan: kriitilised → tähtsad → soovituslikud. Loe ka WCAG 2.2 juhend ja koduehe turvalisus.

    Aitame täiskasvanud WCAG AA auditi ja vastavusse viimisega – võta ühendust.

    Vajad abi oma kodulehega?

    Meie meeskond hooldab, optimeerib ja kaitseb sinu kodulehte. Hinna lepime kokku mahu järgi.

    Küsi pakkumist

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

    Seotud artiklid