Kuidas teha veebisaidist ligipääsetav: WCAG 2.2 algusjuhend

Veebisaidi ligipääsetavaks tegemiseks ehita see nii, et inimesed saavad seda kasutada klaviatuuri, ekraanilugeja, suurendamise või lülitiseadmega, mitte ainult hiirega: kasuta nuppude, linkide, pealkirjade ja vormisiltide jaoks päris HTML-elemente, anna piltidele mõttekad alt-tekstid, hoia teksti kontrast kõrgena ja tee fookus nähtavaks. Standard, mille poole püüelda, on WCAG 2.2 tase AA. Automaatsed kontrollijad leiavad osa probleemist; kümneminutine klaviatuuri- ja ekraanilugeja test leiab suure osa ülejäänust.

Mida „ligipääsetav“ praktikas tähendab

Ligipääsetavus puudutab inimesi: pimedat, kes kasutab ekraanilugejat; värisevat kätt, kes navigeerib klaviatuuriga; nõrgenenud nägemisega inimest, kes suurendab 200%-ni; inimest, kes loeb eredas päikesevalguses; inimest, kellel on ajutiselt katkine randme. Hea ligipääsetavus teeb tavaliselt saidi paremaks kõigile — selgem struktuur, loetav tekst, vormid, mis selgitavad oma vigu.

Viiteks on W3C-i veebisisu ligipääsetavuse juhised (WCAG). 2026. aasta septembri seisuga on praegune versioon WCAG 2.2 (avaldatud 2023. aasta oktoobris, uuendatud 2024. aasta detsembris); WCAG 3 on varane mustand. WCAG on üles ehitatud nelja põhimõtte ümber — sisu peab olema tajutav, kasutatav, arusaadav ja vastupidav — ning sel on kolm vastavustaset:

Tase	Mida see tähendab	Kes püüdleb selle poole
A	Miinimum; ilma selleta ei saa mõned inimesed saiti üldse kasutada	Kõik
AA	Levinud sihttase; hõlmab kontrasti, fookust, suurendamist ja vigade käsitlemist	Enamik organisatsioone ja paljud seadused
AAA	Range; kõigi sisude puhul pole saavutatav	Kindlad teenused ja publikud

Mitmes paigas viitavad seadused WCAG-ile — näiteks Euroopa ligipääsetavuse seadus, mis on alates 2025. aasta juunist kehtinud paljude EL-i tarbijale suunatud digiteenuste suhtes. Millised reeglid sind puudutavad, sõltub sellest, kus tegutsed ja mida müüd; kui pole kindel, küsi nõu. See juhend käsitleb praktilist tööd.

Võimalused, kuidas sinna jõuda

Lähenemine	Sobib	Kompromiss
Ehita see algusest peale sisse	Uued saidid ja äpid	Kõige vähem vaeva kokku; tuleb kohe kokku leppida
Audit ja parandus	Olemasolevad saidid	Leiab päris probleemid; nõuab keskendunud läbivaatust lehe kaupa
Professionaalne audit	Reguleeritud sektorid, suured saidid, avalik sektor	Põhjalik ja dokumenteeritud; maksab raha
Kattevidin	Ei soovitata	Ei suuda alusoleva koodi parandada

Enamiku väikeste saitide jaoks piisavad esimesed kaks: ütle AI-le, et ehitaks ligipääsetavalt algusest peale, ja audiitse enne käivitamist.

Parandused, mis on kõige olulisemad

Kasuta õigeid HTML-elemente

Enamik ligipääsetavusest tuleb korrektse HTML-iga tasuta. <button> on fokuseeritav, töötab Enteriga ja tühikuga ning seda loetakse nupuna. <div> klõpsamise käsitlejaga ei ole ühtegi neist. AI-genereeritud kood kasutab mõnikord kõige jaoks vormindatud div-e; palu semantilisi elemente:

<button> tegevuste jaoks, <a href> navigeerimiseks
Üks <h1> lehe kohta, siis <h2>, <h3> järjekorras — ekraanilugeja kasutajad hüppavad pealkirjade vahel
Maamärgid: <header>, <nav>, <main>, <footer>
<label>, mis on seotud igale vormiväljale
Lehe keel <html lang="en">-is

ARIA atribuute kasuta ainult siis, kui ükski natiivne element ei sobi — näiteks kohandatud sakkide komplekti või kombineeritud kasti puhul. Vale ARIA on hullem kui puudumine.

Klaviatuuriligipääs ja nähtav fookus

Kõik, mida saad hiirega teha, peab toimima ainult klaviatuuriga (WCAG 2.1.1). Vajuta lehel Tab: iga link, nupp ja väli peab olema loogilises järjekorras kättesaadav ning sa peaksid alati nägema, kus fookus asub (2.4.7 Focus Visible). WCAG 2.2 lisas nõude, et fokusseeritud element ei tohi olla täielikult peidetud kleepuvate päiste või küpsisebännerite taha (2.4.11, tase AA).

Levinud vead: menüüd, mis avanevad ainult hiirega peale liikudes, modaalid, mis ei hoia fookust kinni või mida ei saa Escape'iga sulgeda, ja CSS-is outline: none ilma asendajata.

Tekstialternatiivid

Iga tähenduslik pilt vajab alt-teksti, mis ütleb, mida see kontekstis näitab („Kokk serveerib maitsmismenüüd“, mitte „image1.jpg“). Dekoratiivsed pildid saavad tühja alt="", et ekraanilugejad need vahele jätaksid. Ainult ikoonidega nuppudel peab olema ligipääsetav nimi („Sule“, „Otsi“). Videotel peavad olema subtiitrid; helil transkriptsioon.

Värv ja kontrast

WCAG 2.2 tase AA nõuab tavalise teksti puhul vähemalt 4,5:1 kontrastsuhet ja suure teksti puhul 3:1 (1.4.3), ning kasutajaliidese osade, nagu sisendväljade piirjooned ja tähendust kandvad ikoonid, puhul 3:1 (1.4.11). Tavalised vead on helehall kohatäitetekst ja kahvatud nupud. Ära kasuta kunagi ainult värvi tähenduse kandmiseks — kehtetu välja punane piirjoon vajab ka veateadet.

Suurendamine ja ümberpaigutus

Tekst peab jääma kasutatavaks 200%-ni suurendades (1.4.4) ning sisu peab toimima 320 CSS-piksli laiuses ilma külgsuunas kerimata (1.4.10). Hea reageeriv paigutus lahendab suure osa sellest.

Sihtmärgid, vormid ja vead

Sihtmärgi suurus: WCAG 2.2 tase AA nõuab osutamissihtmärkidele vähemalt 24 × 24 CSS-piksli suurust või piisavat vahet väiksemate ümber (2.5.8). Suurem on telefonis sõbralikum.
Vormid: nähtavad sildid (mitte ainult kohatäitetekst), selged juhised ja veateated, mis ütlevad, mis on valesti ja kuidas parandada, väljaga kõrvuti.
Sisselogimine: ära nõua pusle lahendamist ega koodi ülekirjutamist ilma alternatiivita; luba paroolihaldurid ja kleepimine (3.3.8 Accessible Authentication).

Viibad, mis töötavad

Ehita see sait vastavaks WCAG 2.2 tasemele AA: semantilised HTML-maamärgid, üks h1 lehe kohta pealkirjadega õiges järjekorras, päris nupu- ja lingielemendid, sildid igal vormiväljal, nähtavad fookusestiilid, teksti kontrast vähemalt 4,5:1, alt-tekst tähenduslikel piltidel ja alt="" dekoratiivsetel, ning html lang seatud.

Audiitse lehed /signup ja /checkout ligipääsetavuse osas. Kontrolli klaviatuuriga kasutamist, fookuse järjekorda, nähtavat fookust, silte, veateateid, kontrasti ja ekraanilugeja nimesid ikoonnuppudel. Loetle iga probleem koos WCAG kriteeriumiga ja paranda need, muutmata visuaalset disaini rohkem kui vaja.

Mobiilimenüüd ei saa klaviatuuriga kasutada. Tee sellest nupp koos aria-expanded-iga, too fookus menüüsse, kui see avaneb, sulge Escape'iga ja vii fookus tagasi nupule.

Samm-sammult

Tee automaatne kontroll. Lighthouse'i ligipääsetavuse osa Chrome'i DevTools'is või axe brauseri laiendus iga peamise lehe puhul. Paranda kõik, mida see näitab.
Eemalda hiir. Liigu Tab-klahviga läbi iga lehe ja täida kõik põhitoimingud — registreerumine, otsing, kassa. Märka kõik, mida ei saa kätte, mille fookust ei näe või millest ei saa välja.
Suurenda 200%-ni ja kitsenda aken telefonilaiuseks. Midagi ei tohi olla lõigatud ega nõuda külgsuunas kerimist.
Proovi ekraanilugejat kümme minutit: VoiceOver Macis ja iPhone'is, TalkBack Androidis või NVDA Windowsis (tasuta). Kuula pealkirju, linke ja vormivälju. „Nupp“ ilma nimeta või „link, kliki siia“ tähendab tööd.
Kontrolli kontrasti teksti, nuppude ja sisendite jaoks kontrastikontrolliga.
Paranda, seejärel testi uuesti samu ülesandeid.
Avalda ligipääsetavuse avaldus, mis ütleb, millist standardit püüad, ja kuidas probleemidest teatada — ja vasta nendele teadetele.

Levinud vead

Tuginemine kattevidinale koodi parandamise asemel.
Fookusejoonte eemaldamine, sest need näevad korratud välja, ilma asendajata.
Kohatäitetekst kui ainus silt. See kaob, kui keegi hakkab kirjutama, ja on sageli madala kontrastiga.
„Kliki siia“ ja „Loe edasi“ lingid. Kontekstist välja võttes kuulevad ekraanilugeja kasutajad identsete linkide nimekirja.
Alt-tekstid täis märksõnu. Alt-tekst on inimestele; kirjelda pilti.
Testimine ainult korra. Iga uus funktsioon võib klaviatuuriligipääsu rikkuda. Lisa klaviatuuriläbivaatus oma enne käivitamist tehtavasse testimisse.

Ligipääsetavuse kontrollnimekiri

Automaatne kontroll (Lighthouse või axe) puhas peamistel lehtedel
Iga ülesanne on täidetav ainult klaviatuuriga
Fookus alati nähtav ja mitte kunagi peidetud kleepuvate elementide taha
Semantilised pealkirjad, maamärgid, nupud ja lingid; lang seatud
Tähenduslikud alt-tekstid; dekoratiivsed pildid alt=""; videol subtiitrid
Teksti kontrast ≥ 4,5:1 (suur tekst ≥ 3:1); kasutajaliidese osad ≥ 3:1
Toimib 200% suurenduse ja 320 px laiuse korral
Igal vormiväljal nähtav silt ja selged veateated
Ligipääsetavuse avaldus koos viisiga probleemidest teatada

Nende mõistete taga olevat loogikat loe lehelt mis on veebi ligipääsetavus. Ligipääsetav disain ja hea disain kattuvad palju; kuidas teha AI-ga hea välimusega äpp käsitleb visuaalset poolt.

Ligipääsetavus Mythexis

Mythex ehitab nõutud standardi järgi, seega pane „WCAG 2.2 AA“ oma esimesse viipa ja järgnevatesse. Saad kasutada eelvaate telefonisuuruses raami, et kontrollida väikeseid ekraane (Eelvaade ja kood), aga klaviatuuri-, suurendamis- ja ekraanilugeja testid toimivad kõige paremini avaldatud aadressil või eelvaates omaette vahekaardil. Palu agendil lehte auditeerida, parandada leitu ja testi parandusi ise — automaatne läbivaatus on algus, mitte lõplik heakskiit.

Küsimused

Milline on praegune ligipääsetavuse standard veebisaitidele?

2026. aasta septembri seisuga on W3C-i praegune standard WCAG 2.2, mis avaldati esmakordselt 2023. aasta oktoobris. Enamik organisatsioone ja paljud seadused taotlevad taset AA. WCAG 3 on veel varane mustand.

Kas ligipääsetavuse kate teeb mu saidi vastavaks?

Ära looda ainult sellele. Katted lisavad lehele tööriistariba, aga ei suuda parandada puuduvaid silte, katkist klaviatuuriligipääsu ega kehva struktuuri aluskoodis. Saidi enda parandamine on see, mis muudab selle kasutatavaks.

Kas automaatsed kontrollijad leiavad kõik probleemid?

Ei. Tööriistad nagu Lighthouse ja axe leiavad asju nagu puuduvad alt-tekstid, madal kontrast ja sildistamata väljad, aga paljud probleemid — segadust tekitav fookusejärjekord, mõttetu linkide tekst, alt-tekst, mis on olemas, aga vale — vajavad inimest, kes kontrollib klaviatuuriga ja ekraanilugejaga.

Millist kontrastsuhet WCAG nõuab?

WCAG 2.2 tase AA nõuab vähemalt 4,5:1 tavalise teksti ja 3:1 suure teksti puhul ning 3:1 kasutajaliidese elementide puhul, nagu sisendväljade piirjooned ja tähendust kandvad ikoonid.