♿ WordPressi veebisaidi ligipääsetavus: täielik juhend 2026

Kui kasutaja ei suuda sinu teksti lugeda, nuppu vajutada või lihtsalt aru saada, kuhu link viib, lahkub ta. Mitte sellepärast, et sisu oleks halb. Sest veebisait ei räägi temaga.

Alates 2025. aasta juunist muutus Euroopa ligipääsetavuse akt (EAA) kohustuslikuks. Saksamaal kehtib selle riiklik Barrierefreiheitsstärkungsgesetz (BFSG). Trahvid, vastavusnõuded, kaotatud publik. Kuid juriidilise surve taga peitub lihtne tõde: WHO andmetel elab umbes 16% inimestest kogu maailmas, see tähendab iga kuues, mingi puudega. Nende ignoreerimine tähendab iga kuuenda külastaja kaotamist.

WordPress ei ole siinkohal ei erand ega surmaotsus. CMS pakub tugevat alust, kuid tõeline ligipääsetavus on arendaja või saidiomaniku teadlike tegude tulemus. See juhend on samm-sammuline jaotus: alates pealkirjastruktuurist kuni klaviatuuril navigeerimiseni, teema valikust kuni automaatsete kontrollideni. Ei mingit udu, ainult see, mida saad juba täna rakendada. 💡 Kiirülevaade:

• Kontrolli tajutavust: igale pildile tähenduslik alt-tekst, ikoonidele aria-label, igale lingile selge ankurdustekst.
• Saavuta kontrastsussuhe 4,5:1 tavalise teksti ja 3:1 suure teksti puhul, kasutades WebAIM Contrast Checkerit.
• Ehita üles pealkirjade hierarhia: üks H1 lehe kohta, seejärel H2 ja H3, ilma vahelejäetud tasemeteta.
• Tagada klaviatuuriga ligipääsetavus: kõik, mis on hiirega klikitav, peab toimima ka Tab ja Enter klahvidega.
• Kontrolli vorme: igale sisestusväljale selge silt (label); placeholder ei asenda kirjeldust.
• Käivita WAVE või Lighthouse: automaatne audit leiab enamiku probleemidest poole minutiga.

Mis on veebi ligipääsetavus ja miks see on 2026. aastal kohustuslik

Veebi ligipääsetavus on veebisaitide kavandamise ja arendamise tava, mis võimaldab neid kasutada inimestel igasuguste füüsiliste ja kognitiivsete võimetega. Ekraanilugejad pimedatele kasutajatele, klaviatuuril navigeerimine motoorsete häiretega inimestele, piisav kontrast vaegnägijatele, subtiitrid kurtidele kasutajatele.

De facto standard on W3C konsortsiumi WCAG 2.2 (Web Content Accessibility Guidelines). Kolm taset: A (minimaalne), AA (eesmärk enamikule) ja AAA (kõrgeim). ELi ja USA seadusandlus nõuab taset AA.

Euroopa ligipääsetavuse akt (EL direktiiv 2019/882) jõustus 28. juunil 2025, hõlmates e-kaubandust, pangandust, transporti ja meediat. Saksamaal kehtib paralleelselt BFSG. Trahvid varieeruvad: Saksamaal kuni 100 000 €, Prantsusmaal kuni 250 000 €. Äriettevõtete WordPressi saidid kuuluvad otseselt selle määruse alla.

Tajutavus: kuidas muuta sisu ekraanilugejatele arusaadavaks

Ligipääsetavuse lähtepunkt: teave tuleb esitada nii, et kasutaja saaks seda tajuda vähemalt ühe kanali kaudu: nägemine, kuulmine, kompimine.

Pildid ja alt-tekst. Igal img sildil peab olema alt atribuut. Tähenduslike piltide puhul kirjeldus sellest, mis pildil toimub (5-8 sõna, ilma sõnadeta „pilt" või „kujutis"). Dekoratiivsete piltide puhul alt="" (tühi, kuid olemas). Ekraanilugeja jätab tühja alt-teksti vahele ega sega kasutajat.

1
/* functions.php — forced alt for post thumbnails */
2
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
3
    if (empty($attr['alt'])) {
4
        $attr['alt'] = get_the_title($attachment->ID);
5
    }
6
    return $attr;
7
}, 10, 2);

Tühjad lingid ja nupud. Luubiikoon ilma tekstita on ekraanilugejale mõistatus. Lisa ikooninuppudele alati aria-label:

1
<button aria-label="Open search">
2
    <span class="dashicons dashicons-search"></span>
3
</button>

Title atribuudid. Kasulikud lisakonteksti jaoks, kuid ära korda neis lingi teksti; ekraanilugeja loeb sama asja kaks korda. WordPress kordab vaikimisi lingi teksti title atribuudis; see tuleks keelata.

Värvikontrast: põhinumbrid ja kontrollimise tööriistad

Ebapiisav kontrast teksti ja tausta vahel on kõige levinum probleem. WebAIM Million 2025 andmetel leiti madalat kontrasti 81% skannitud saitidest.

WCAG 2.2 AA miinimumnõuded:

• Tavaline tekst (väiksem kui 18pt): kontrast 4,5:1
• Suur tekst (18pt ja suurem või 14pt paksus kirjas): kontrast 3:1
• Ikoonid ja UI elemendid: kontrast 3:1

Kontrolli seda minutiga, kasutades WebAIM Contrast Checkerit: sisesta teksti ja tausta värvid HEX-koodina ning saad otsuse: läbitud / mitteläbitud iga taseme kohta.

Tüüpilised probleemkohad WordPressis: hall tekst valgel taustal jaluses, heledad nupud valgete siltidega, tekst fotode peal ilma tumendava ülekatteta. Parandatakse CSS-i muutmisega, enamasti teksti paari tooni võrra tumedamaks tegemisega.

Pealkirjastruktuur: hierarhia, millest kõik aru saavad

Ekraanilugejad koostavad lehe pealkirjadest „sisukorra"; kasutaja hüppab läbi H2-de ja H3-de, jättes navigatsiooni vahele. Kui hierarhia on katki, laguneb ka navigeerimine.

Reeglid:

• Üks H1 lehe kohta, tavaliselt postituse pealkiri
• H2 põhiosade jaoks, H3 alaosade jaoks H2 sees
• Pealkirjad ei jäta tasemeid vahele: H2 → H4 (H3 vahelejätmine) on viga
• Ära kasuta h* silte ainult fondi suuruse pärast; selleks on CSS

Tüüpiline probleem WordPressis: pluginad ja teemad, mis lisavad oma plokkidele H2/H3 (slaiderid pealkirjaga, tellimisvorm, külgriba vidinad). Kolm lahendust: leia pluginast sildi seadistus, kohanda väljundit filtri kaudu või vaheta hoolikama plugina vastu. Katkise hierarhiaga leppimine, sest „see näeb kena välja", ei ole valik.

Navigeerimine ja orientiirid: teeviidad ekraanilugejale

HTML5 orientiirid annavad ekraanilugejale lehe kaardi. Neli võtmesilti: header päise jaoks, nav navigeerimise jaoks, main põhisisu jaoks ja footer jaluse jaoks. Kasutaja vajutab kiirklahvi ja hüppab otse põhisisu juurde.

1
<header role="banner">
2
<nav role="navigation">
3
<main role="main">
4
<footer role="contentinfo">

role="main" roll peab lehel esinema täpselt ühe korra. Enamik kaasaegseid WordPressi teemasid kasutab neid silte vaikimisi; kontrolli WAVE abil: jaotis „Structure" kuvab kõik orientiirid.

Teine nõutav element, „Skip to Content", on nähtamatu link lehe esimese elemendina, mis võimaldab kasutajatel menüüst mööda hüpata ja otse sisu juurde liikuda. WordPressis lisatakse see filtri või ligipääsetavuse plugina abil.

Tõketeta vormid

Kontaktivorm, uudiskirjaga liitumine, kassasse minek: igal väljal peab olema silt ja see peab olema klaviatuuriga ligipääsetav.

*Igal input-väljal peab olema oma label (selgesõnaline või aria-label kaudu):*

1
<label for="user-email">Email</label>
2
<input id="user-email" name="email" type="email">

Kohatäide ei asenda silti; see kaob sisestamisel ja ekraanilugejad loevad seda halvasti. Kasuta placeholder-it ainult vormingu vihjena, mitte välja nimetusena.

Rühmitamine: mähi raadionupud ja märkeruudud <fieldset> elementi koos <legend>-iga. Kohustuslikud väljad: märgi need tekstiga „(kohustuslik)", mitte ainult tärni või värviga.

Klaviatuuriga navigeerimine: sinu leht ilma hiireta

Mõned kasutajad ei kasuta kunagi hiirt: treemor, spastilisus, halvatus. Kõik peab toimima klahvidega Tab, Shift+Tab, Enter, Escape ja nooleklahvid.

Kiirtest: ava leht ja navigeeri sellel ainult Tab-klahvi kasutades. Igal interaktiivsel elemendil peab olema nähtav fookuse indikaator. Modaalaken peab sulguma Escape-klahviga. Rippmenüü peab avanema Enter-klahviga.

Tüüpilised WordPressi saitide vead:

• Kohandatud rippmenüüd ilma tabindex-i ja aria-expanded-ita
• outline: none CSS-is (eemaldab fookuse indikaatori; ära tee seda)
• Lõputu fookuse lõks hüpikakendes
• Liugurid, mis ei ole klaviatuuriga juhitavad

Ära kunagi keela täielikult vaikimisi :focus stiili. Kui sulle ei meeldi brauseri kontuurjoon, asenda see kohandatud :focus-visible stiiliga, millel on kõrge kontrastsusega ring.

Suum: ära takista kasutajatel teksti suurendamast

Paljud WordPressi saitide mobiiliversioonid blokeerivad näpu-liigutusega suumimise meta-sildi abil:

1
<!-- INCORRECT — do not do this -->
2
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
3
 
4
<!-- CORRECT -->
5
<meta name="viewport" content="width=device-width, initial-scale=1">

WCAG 2.2 nõuab võimet suurendada kuni 200%-ni ilma sisu või funktsionaalsuse kaota; see on edukriteerium 1.4.4. Kontrolli, et tekst ei lõiguks ära ega kattuks teiste plokkidega suumimisel.

WordPressi teemad ja ligipääsetavus: mida teema valimisel jälgida

Ükski teema pole „karbist võttes täielikult ligipääsetav", liiga palju sõltub sisust ja seadetest. Kuid alusmaterjal on oluline.

Teemat valides pööra tähelepanu järgmisele:

• Kirjelduses on märge „accessibility ready", see on WordPress.org silt, mis tähendab põhinõuetele vastavust
• Korrektne HTML5 struktuur orientiiridega
• Navigatsioonimenüüd, loomulik <nav> koos <ul>-ga, mitte JS-ga div-konstruktsioon
• Linkide ja nuppude :focus stiilide olemasolu
• maximum-scale=1.0 puudumine vaateaknas

Standardsed WordPressi teemad (Twenty Twenty-Four, Twenty Twenty-Five) on korralik lähtepunkt. Kommertsteemad visuaalsete ehitajatega on riskipiirkond: mida rohkem visuaalset „maagiat", seda suurem on tõenäosus, et ligipääsetavus on katki.

Auditeerimise tööriistad: kiirkontrollist professionaalse testimiseni

WAVE Evaluation Tool. Brauserilaiendus WAVE WebAIM-ilt, see kuvab ikoonid otse lehel: punane vigade jaoks, kollane hoiatuste jaoks, roheline hea jaoks. Ideaalne esmaseks auditiks. See näitab kontrasti, alt-tekste, pealkirjastruktuuri, ARIA atribuute.

Google Lighthouse. Chrome DevToolsi sisseehitatud (F12 → Lighthouse → Accessibility). See annab numbrilise skoori 0-100 ja nimekirja konkreetsetest parandamist vajavatest elementidest. Mugav regulaarseks monitooringuks.

Accessibility Checker (Equalize Digital). WordPressi plugin, Accessibility Checker kontrollib sisu otse redaktoris (Gutenberg ja Classic). Tasuta versioon skannib postituse enne avaldamist, Pro lisab kogu saidi auditi.

WP Accessibility. Ligipääsetavuse pluginatest veteran, WP Accessibility autorilt Joe Dolson. See lisab vahelejätmise lingid, ARIA orientiirid, eemaldab dubleerivad lingi pealkirja atribuudid, parandab :focus stiilid, eemaldab tabindex-i vormidelt ja target-i linkidelt. See pole imerohi, kuid see lahendab ühe hoobiga kümmekond tüüpilist probleemi.

One Click Accessibility. Tööriistaribaga plugin, One Click Accessibility võimaldab kasutajal ise kontrasti muuta, fondi suurust suurendada ja linke alla joonida. See ei asenda loomulikku ligipääsetavust, vaid on lisakiht neile, kes vajavad spetsiifilisi seadeid.

NVDA. Tasuta ekraanilugeja Windowsile, NVDA. Mine oma saiti läbi, monitor välja lülitatud. Sa kuuled seda, mida pime kasutaja kuuleb. VoiceOver (sisseehitatud macOS/iOS) on samaväärne Apple'i ökosüsteemis.

Kümme sammu ligipääsetava WordPressi saidini

Siin on kogu juhendi destilleeritud tuum, kontrollnimekiri. Mine see läbi pärast iga ümberkujundust või uue projekti käivitamist.

• Kirjuta igale pildile alt-tekst. WordPressi meediateegis täida väli „Alternatiivtekst". Dekoratiivsete piltide puhul kasuta alt="".

• Kirjelda linke. Lingi tekst peaks edastama, kuhu see viib. „Kliki siia" ja „Loe edasi" on halvad ankrud. „Laadi alla Accessibility Checkeri plugin" on hea.

• Järjesta pealkirjad. Üks H1, seejärel H2 ja H3 H2 sees. Kontrolli WAVE-is: Structure → Heading Outline.

• Vii kontrast suhteni 4,5:1. Käivita WebAIM Contrast Checker teema põhivärvidel: tekst, pealkirjad, nupud, lingid, jalus.

• Võimalda nähtav fookus. Veendu, et :focus poleks seatud väärtusele outline: none ilma asenduseta. Kohandatud fookus tehakse :focus-visible abil.

• Kontrolli klaviatuuriga navigeerimist. Liigu tabeldusklahviga läbi kõik lingid ja nupud, Enter aktiveerimiseks, Escape modaalide sulgemiseks. Kui jääd kinni, on see viga.

• Varusta vormid siltidega. Igal väljal peab olema oma <label>. Kohustuslikud väljad vajavad tekstilist indikaatorit. Grupid paiguta <fieldset>-i.

• Ära blokeeri suumimist. Vaateaken ilma maximum-scale ja user-scalable=no-ta. Kontrolli 200% suumiga, sisu ei tohiks ära lõigata.

• Lisa vahelejätmise link. „Otse sisuni" link <body> esimese elemendina. WP Accessibility teeb seda automaatselt.

• Käivita WAVE või Lighthouse. Automatiseeritud audit ei asenda käsitsi testimist, kuid see leiab minuti jooksul üles valdava enamuse probleemidest.

⁉️🤔 Korduma kippuvad küsimused

Kas minu WordPressi sait peab WCAG nõuetele vastama?

Kui teie sait esindab Euroopa Liidus tegutsevat ettevõtet, siis jah, alates 2025. aasta juunist. Euroopa ligipääsetavuse akt hõlmab e-kaubandust, rahandust, transporti ja meediat. USA-s kehtivad sarnased nõuded: ADA ja jaotis 508 valitsusasutustele ja nende töövõtjatele. Isiklik blogi ei pea formaalselt nõuetele vastama, kuid märkimisväärsel osal kasutajatest on puuded, mis on tugev äriline argument.

Jah, EL-i ärilised saidid peavad alates 28. juunist 2025 vastama WCAG 2.2 AA nõuetele vastavalt Euroopa ligipääsetavuse aktile. Trahvid kehtestavad liikmesriigid: summad võivad ulatuda sadadesse tuhandetesse eurodesse sõltuvalt jurisdiktsioonist. USA-s kehtivad sarnased nõuded ADA ja jaotise 508 kaudu. Isiklikele mitteärilistele blogidele seaduslikku kohustust ei ole, kuid ligipääsetavus laiendab auditooriumi.

Kas piisab, kui paigaldada plugin nagu One Click Accessibility?

Tööriistariba plugin on abistav kiht, mitte lahendus. See võimaldab kasutajal muuta kontrasti või fondi suurust, kuid see ei paranda puuduvat alt-teksti, katkist pealkirjade hierarhiat ega klaviatuuriga mitteligipääsetavaid hüpikaknaid. Alustage loomupärasest ligipääsetavusest koodis ja sisus, lisage tööriistariba viimase lihvina.

Ei. Tööriistariba (One Click Accessibility, UserWay) on ainult täiendav „pealiskiht". See ei asenda loomupärast ligipääsetavust: see ei paranda alt-teksti, pealkirjade hierarhiat, klaviatuurilõkse ega märgendamata vormivälju. Alustage koodi ja sisu parandamisest, tööriistariba on viimane lihv.

Kuidas testida saiti ilma kalleid tööriistu ostmata?

Täielik tsükkel tasuta tööriistadega: WAVE Extension (esimene kiirskaneering) → Google Lighthouse (numbriline skoor + probleemide nimekiri) → käsitsi klaviatuuriga läbikäimine (Tab/Enter/Escape) → NVDA Windowsis või VoiceOver Macis (minge sait läbi väljalülitatud monitoriga). Sellest piisab, et lahendada valdav enamus probleeme.

Tasuta tsükkel: WAVE Extension brauserile → Google Lighthouse Chrome DevToolsis → käsitsi klaviatuuriga läbikäimine → NVDA (Windows) või VoiceOver (macOS/iOS) ekraanilugejaga testimiseks. Need neli tööriista katavad 90% ülesannetest. Tasulisi teenuseid on vaja ainult suurte projektide regulaarseks auditeerimiseks.

Kas visuaalse leheehitajaga (Elementor, WPBakery) tehtud saiti saab ligipääsetavaks muuta?

Saab, kuid see on keerulisem. Leheehitajad genereerivad HTML-i dünaamiliselt ja mõned vidinad lõhuvad pealkirjade hierarhiat või lisavad semantikata div-ümbrisi. Kontrollige iga plokki eraldi WAVE'iga. Elementori Pro versioon 3.15+ lisas vidinatele aria-atribuutide seaded, kasutage neid.

Saab, kuid see nõuab rohkem käsitsitööd. Visuaalsed leheehitajad kipuvad lõhkuma pealkirjade hierarhiat ja genereerima liigseid div-ümbrisi. Kontrollige tulemust WAVE'iga pärast iga muudatust. Elementor Pro (3.15+) võimaldab määrata vidinatele ARIA-atribuute, mis osaliselt lahendab probleemi.

Kui tihti peaksin saidi ligipääsetavust üle kontrollima?

Pärast iga olulist uuendust: uus teema, uus plugin, kujunduse uuendus, suurem sisu avaldamine. Minimaalne tsükkel: käivitage Lighthouse ja käige kord kvartalis peamised lehed klaviatuuriga läbi. Regulaarse sisuga saitide puhul on automatiseeritud monitooring Accessibility Checker Pro abil õigustatud.

Vähemalt pärast iga suuremat muudatust (teema vahetus, uus plugin, kujunduse uuendus) ja kord kvartalis ennetava meetmena. Regulaarsete väljaannetega saitide puhul on automatiseeritud monitooring Accessibility Checker Pro abil õigustatud. Ekraanilugeja testist piisab kord poole aasta jooksul, kui koodibaas pole muutunud.

Mida WordPressi saidi ligipääsetavuse osas kohe ette võtta

Ära oota ideaalset hetke. WCAG 2.2 AAA on eesmärk, mitte lähtepunkt. Alusta juba täna kolme tegevusega:

• Käivita WAVE oma kodulehel. Paranda punased vead (tavaliselt 5-10 tükki), need kõrvaldavad kõige tõsisemad tõkked.
• Navigeeri saidil klaviatuuriga. Tab, Tab, Tab. Kui jääd kinni, paranda ära. Kui fookus pole nähtav, lisa :focus-visible.
• Kontrolli kolme värvi kontrastsust: tekstivärv, nupuvärv, lingivärv. Too need tasemele 4,5:1.

Need kolm sammu, pool tundi tööd ja lõviosa tulemusest ongi käes. Ülejäänu, pistikprogrammid, ekraanilugejad, ARIA, tegele järk-järgult.

Kui sait on äriline ja tegutseb ELis, ära lükka seda edasi. Euroopa ligipääsetavuse akt (EAA) annab järelevalveasutustele alates 2025. aastast reaalsed hoovad. Parem on minna auditile vastu rohelise Lighthouse’i skooriga kui regulaatori kirjaga.