♿ WordPress-verkkosivuston saavutettavuus: täydellinen opas 2026

Kun käyttäjä ei pysty lukemaan tekstiäsi, klikkaamaan painiketta tai yksinkertaisesti ymmärtämään, mihin linkki johtaa, hän poistuu. Ei siksi, että sisältö olisi huonoa. Vaan siksi, että sivusto ei puhuttele häntä.

Kesäkuusta 2025 alkaen eurooppalainen esteettömyyssäädös (European Accessibility Act, EAA) tuli pakolliseksi. Saksassa sen kansallinen vastine on Barrierefreiheitsstärkungsgesetz (BFSG). Sakkoja, vaatimuksia korjaustoimista, menetetty yleisö. Mutta oikeudellisen paineen takana piilee yksinkertainen totuus: WHO:n mukaan noin 16 prosenttia maailman väestöstä, eli yksi kuudesta, elää jonkinlaisen vamman kanssa. Heidän sivuuttamisensa tarkoittaa joka kuudennen kävijän menettämistä.

WordPress ei ole tässä poikkeus eikä kuolemantuomio. CMS tarjoaa vankan perustan, mutta todellinen esteettömyys syntyy kehittäjän tai sivuston omistajan tietoisista toimista. Tämä opas on vaiheittainen erittely: otsikkorakenteesta näppäimistönavigointiin, teeman valinnasta automatisoituihin tarkistuksiin. Ei turhaa löpinää, vain asioita, joita voit soveltaa jo tänään. 💡 Pikakatsaus:

• Tarkista havaittavuus: merkityksellinen alt-teksti jokaiselle kuvalle, aria-label kuvakkeille, selkeä ankkuriteksti jokaiselle linkille.
• Saavuta kontrastisuhde 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille WebAIM Contrast Checker -työkalulla.
• Rakenna otsikkohierarkia: yksi H1 per sivu, sitten H2 ja H3 ilman ohitettuja tasoja.
• Varmista näppäimistökäytettävyys: kaiken, mitä voi klikata hiirellä, on toimittava Tab- ja Enter-näppäimillä.
• Tarkista lomakkeet: jokaisella syötekentällä on oltava erillinen nimilappu (label); placeholder ei korvaa kuvausta.
• Aja WAVE tai Lighthouse: automaattinen auditointi löytää suurimman osan ongelmista puolessa minuutissa.

Mitä verkkosisällön saavutettavuus on ja miksi se on pakollista vuonna 2026

Verkkosisällön saavutettavuus tarkoittaa verkkosivustojen suunnittelua ja kehittämistä siten, että ihmiset, joilla on erilaisia fyysisiä ja kognitiivisia kykyjä, voivat käyttää niitä. Ruudunlukuohjelmat sokeille käyttäjille, näppäimistönavigointi henkilöille, joilla on motorisia rajoitteita, riittävä kontrasti heikkonäköisille, tekstitys kuuroille käyttäjille.

De facto -standardi on W3C-konsortion WCAG 2.2 (Web Content Accessibility Guidelines). Kolme tasoa: A (minimi), AA (tavoite useimmille) ja AAA (korkein). EU:n ja Yhdysvaltojen lainsäädäntö edellyttää AA-tasoa.

Eurooppalainen esteettömyyssäädös (EU-direktiivi 2019/882) tuli voimaan 28. kesäkuuta 2025, ja se kattaa verkkokaupan, pankkipalvelut, liikenteen ja median. Saksassa sovelletaan rinnakkain BFSG:tä. Sakot vaihtelevat: Saksassa jopa 100 000 €, Ranskassa jopa 250 000 €. Kaupallisten yritysten WordPress-sivustot kuuluvat suoraan säädöksen piiriin.

Havaittavuus: miten sisällöstä tehdään ymmärrettävää ruudunlukuohjelmille

Saavutettavuuden lähtökohta: tieto on esitettävä niin, että käyttäjä voi havaita sen vähintään yhden kanavan kautta: näkö, kuulo tai tunto.

Kuvat ja alt-teksti. Jokaisella img-tagilla on oltava alt-attribuutti. Merkityksellisille kuville kuvaus siitä, mitä niissä tapahtuu (5-8 sanaa, ilman sanoja "kuva" tai "valokuva"). Koristeellisille kuville alt="" (tyhjä, mutta olemassa). Ruudunlukuohjelma ohittaa tyhjän alt-tekstin eikä häiritse käyttäjää.

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);

Tyhjät linkit ja painikkeet. Suurennuslasikuvake ilman tekstiä on ruudunlukuohjelmalle arvoitus. Lisää aina aria-label kuvakepainikkeisiin:

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

Title-attribuutit. Hyödyllisiä lisäkontekstin antamiseen, mutta älä toista linkkitekstiä niissä; ruudunlukuohjelma lukee saman asian kahdesti. WordPress toistaa oletuksena linkkitekstin title-attribuutissa; tämä tulisi poistaa käytöstä.

Värikontrasti: perusluvut ja tarkistustyökalut

Riittämätön kontrasti tekstin ja taustan välillä on yleisin ongelma. WebAIM Million 2025 -tutkimuksen mukaan matala kontrasti löytyi 81 prosentilta skannatuista sivustoista.

WCAG 2.2 AA -tason vähimmäisvaatimukset:

• Normaali teksti (alle 18 pt): kontrasti 4,5:1
• Suuri teksti (18 pt ja yli tai 14 pt lihavoitu): kontrasti 3:1
• Kuvakkeet ja käyttöliittymäelementit: kontrasti 3:1

Tarkista se minuutissa WebAIM Contrast Checkerillä: syötä tekstin ja taustan värit HEX-muodossa ja saat tuomion: Hyväksytty / Hylätty kullekin tasolle.

Tyypillisiä ongelmakohtia WordPressissä: harmaa teksti valkoisella taustalla alatunnisteessa, vaaleat painikkeet valkoisilla teksteillä, teksti kuvien päällä ilman tummentavaa kerrosta. Korjataan muokkaamalla CSS:ää, useimmiten tummentamalla tekstiä parilla sävyllä.

Otsikkorakenne: hierarkia, jonka kaikki ymmärtävät

Ruudunlukuohjelmat rakentavat sivulle "sisällysluettelon" otsikoista; käyttäjä hyppii H2- ja H3-otsikoiden välillä ohittaen navigaation. Jos hierarkia on rikki, navigointi hajoaa.

Säännöt:

• Yksi H1 per sivu, tyypillisesti artikkelin otsikko
• H2 pääosioille, H3 alaosioille H2:n sisällä
• Otsikkotasoja ei ohiteta: H2 → H4 (H3:n ohittaminen) on virhe
• Älä käytä h*-tageja pelkästään fonttikoon vuoksi; käytä siihen CSS:ää

Tyypillinen ongelma WordPressissä: lisäosat ja teemat, jotka lisäävät H2/H3-otsikoita omiin lohkoihinsa (liukusäätimet otsikolla, tilauslomake, sivupalkin vimpaimet). Kolme ratkaisua: etsi tagin asetus lisäosasta, mukauta tulostetta filtterin kautta tai vaihda huolellisempaan lisäosaan. Rikkinäisen hierarkian sietäminen "koska se näyttää hyvältä" ei ole vaihtoehto.

Navigaatio ja maamerkit: opasteet ruudunlukuohjelmalle

HTML5-maamerkit antavat ruudunlukuohjelmalle sivun kartan. Neljä keskeistä tagia: header ylätunnisteelle, nav navigaatiolle, main pääsisällölle ja footer alatunnisteelle. Käyttäjä painaa pikanäppäintä ja hyppää suoraan pääsisältöön.

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

role="main"-roolin tulee esiintyä täsmälleen kerran sivua kohden. Useimmat modernit WordPress-teemat käyttävät näitä tageja valmiiksi; tarkista WAVE-työkalulla: "Structure"-osio näyttää kaikki maamerkit.

Toinen pakollinen elementti, "Siirry sisältöön", on näkymätön linkki sivun ensimmäisenä elementtinä, jonka avulla käyttäjät voivat hypätä valikon yli suoraan sisältöön. WordPressissä se lisätään filtterin tai saavutettavuuslisäosan kautta.

Esteettömät lomakkeet

Yhteydenottolomake, uutiskirjeen tilaus, kassa: jokaisella kentällä on oltava nimilappu ja siihen on päästävä näppäimistöllä.

*Jokaisella input-kentällä on oltava oma label (eksplisiittinen tai aria-label-attribuutin kautta):*

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

Paikkamerkkiteksti ei korvaa nimilappua; se katoaa kirjoitettaessa ja ruudunlukijat lukevat sen huonosti. Käytä placeholder-attribuuttia vain muotoiluvihjeenä, älä kentän nimenä.

Ryhmittely: kääri valintanapit ja valintaruudut <fieldset>-elementin sisään ja varusta ne <legend>-elementillä. Pakolliset kentät: merkitse ne tekstillä "(pakollinen)", älä pelkällä tähdellä tai värillä.

Näppäimistönavigointi: sivusi ilman hiirtä

Jotkut käyttäjät eivät koskaan käytä hiirtä: syynä voi olla vapina, spastisuus tai halvaus. Kaiken on toimittava Tab-, Shift+Tab-, Enter-, Escape- ja nuolinäppäimillä.

Nopea testi: avaa sivu ja navigoi sillä pelkällä sarkainnäppäimellä. Jokaisen vuorovaikutteisen elementin on saatava näkyvä kohdistusilmaisin. Modaalin on sulkeuduttava Escape-näppäimellä. Pudotusvalikon on laajennuttava Enter-näppäimellä.

Tyypillisiä WordPress-sivustojen puutteita:

• Mukautetut pudotusvalikot ilman tabindex- ja aria-expanded-attribuutteja
• outline: none CSS:ssä (poistaa kohdistusilmaisimen; älä tee näin)
• Päättymätön kohdistusloukko ponnahdusikkunoissa
• Liukusäätimet, joita ei voi käyttää näppäimistöllä

Älä koskaan poista oletusarvoista :focus-tyyliä kokonaan. Jos et pidä selaimen reunuksesta, korvaa se mukautetulla :focus-visible-tyylillä, jossa on korkeakontrastinen kehys.

Zoomaus: älä estä käyttäjiä suurentamasta tekstiä

Monet WordPress-sivustojen mobiiliversiot estävät nipistyszoomauksen meta-tagin avulla:

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 edellyttää mahdollisuutta zoomata 200 prosenttiin ilman sisällön tai toiminnallisuuden menetystä; tämä on onnistumiskriteeri 1.4.4. Tarkista, ettei teksti leikkaannu tai mene päällekkäin muiden lohkojen kanssa zoomattaessa.

WordPress-teemat ja saavutettavuus: mitä katsoa teemaa valitessa

Mikään teema ei ole "täysin saavutettava suoraan paketista", liian paljon riippuu sisällöstä ja asetuksista. Mutta lähtökohdalla on väliä.

Kun valitset teemaa, kiinnitä huomiota näihin:

• Kuvauksessa lukee "accessibility ready", tämä on WordPress.orgin tagi, joka tarkoittaa perustason vaatimustenmukaisuutta
• Oikea HTML5-rakenne ja maamerkit
• Navigointivalikot, natiivi <nav> ja <ul>, ei div-viritelmää ja JavaScriptiä
• :focus-tyylit linkeille ja painikkeille
• maximum-scale=1.0 puuttuu viewportista

WordPressin oletusteemat (Twenty Twenty-Four, Twenty Twenty-Five) ovat kelvollinen lähtökohta. Kaupalliset teemat, joissa on visuaalisia rakentajia, ovat riskialuetta: mitä enemmän visuaalista "taikaa", sitä suurempi todennäköisyys rikkinäiseen saavutettavuuteen.

Auditointityökalut: pikavilkaisusta ammattimaiseen testaukseen

WAVE Evaluation Tool. Selainlaajennus WAVE WebAIMilta, se asettaa kuvakkeet suoraan sivun päälle: punainen virheille, keltainen varoituksille, vihreä hyvälle. Ihanteellinen ensimmäiseen auditointiin. Se näyttää kontrastit, alt-tekstit, otsikkorakenteen ja ARIA-attribuutit.

Google Lighthouse. Sisäänrakennettu Chrome DevToolsiin (F12 → Lighthouse → Accessibility). Se antaa numeerisen pistemäärän 0-100 ja listan korjattavista elementeistä. Kätevä säännölliseen seurantaan.

Accessibility Checker (Equalize Digital). WordPress-lisäosa, Accessibility Checker tarkistaa sisällön suoraan editorissa (Gutenberg ja Classic). Ilmainen versio skannaa artikkelin ennen julkaisua, Pro-versio lisää koko sivuston auditoinnin.

WP Accessibility. Veteraani saavutettavuuslisäosien joukossa, WP Accessibility Joe Dolsonilta. Se lisää ohituslinkit, ARIA-maamerkit, poistaa päällekkäiset linkkien title-attribuutit, korjaa :focus-tyylit, poistaa tabindex-attribuutin lomakkeista ja target-attribuutin linkeistä. Ei hopealuoti, mutta se paikkaa tusinan verran tyypillisiä ongelmia yhdellä kertaa.

One Click Accessibility. Lisäosa työkalupalkilla, One Click Accessibility antaa käyttäjän itse vaihtaa kontrastia, suurentaa fonttikokoa ja alleviivata linkit. Tämä ei korvaa natiivia saavutettavuutta, vaan on lisäkerros niille, jotka tarvitsevat tiettyjä asetuksia.

NVDA. Ilmainen ruudunlukija Windowsille, NVDA. Selaa sivustosi läpi näyttö sammutettuna. Kuulet saman kuin sokea käyttäjä. VoiceOver (sisäänrakennettu macOS:ssä/iOS:ssä) on vastaava Applen ekosysteemissä.

Kymmenen askelta saavutettavaan WordPress-sivustoon

Tässä on koko oppaan tiivistetty anti, tarkistuslista. Käy se läpi jokaisen uudelleensuunnittelun tai uuden projektin julkaisun jälkeen.

• Kirjoita alt-teksti jokaiselle kuvalle. WordPressin mediakirjastossa täytä "Vaihtoehtoinen teksti" -kenttä. Koristekuville käytä alt="".

• Kuvaile linkit. Linkkitekstin tulee kertoa, minne se johtaa. "Klikkaa tästä" ja "Lue lisää" ovat huonoja ankkureita. "Lataa Accessibility Checker -lisäosa" on hyvä.

• Järjestä otsikot hierarkkisesti. Yksi H1, sitten H2, ja H3 H2:n sisällä. Tarkista WAVElla: Structure → Heading Outline.

• Nosta kontrasti arvoon 4,5:1. Aja teeman päävärit WebAIM Contrast Checkerin läpi: teksti, otsikot, painikkeet, linkit, alatunniste.

• Ota näkyvä fokus käyttöön. Varmista, ettei :focus ole asetettu muotoon outline: none ilman korvaavaa tyyliä. Mukautettu fokus tehdään :focus-visible-valitsimella.

• Tarkista näppäimistönavigointi. Selaile sarkaimella kaikki linkit ja painikkeet, Enter aktivoi, Escape sulkee modaalit. Jos jäät jumiin, se on bugi.

• Nimeä lomakkeet. Jokainen kenttä tarvitsee oman <label>-elementtinsä. Pakolliset kentät tarvitsevat tekstimuotoisen merkinnän. Ryhmät laitetaan <fieldset>-elementin sisään.

• Älä estä zoomausta. Viewport ilman maximum-scale- ja user-scalable=no-määrityksiä. Tarkista 200% zoomilla, sisältö ei saa leikkautua.

• Lisää ohituslinkki. "Siirry sisältöön" -linkki <body>-elementin ensimmäiseksi elementiksi. WP Accessibility tekee tämän automaattisesti.

• Aja WAVE tai Lighthouse. Automaattinen auditointi ei korvaa manuaalista testausta, mutta se löytää valtaosan ongelmista minuutissa.

⁉️🤔 Usein kysytyt kysymykset

Pitääkö WordPress-sivustoni noudattaa WCAG-ohjeistusta?

Jos sivustosi edustaa yritystä EU:ssa, kyllä, kesäkuusta 2025 alkaen. Eurooppalainen esteettömyyssäädös kattaa verkkokaupan, rahoituksen, liikenteen ja median. Yhdysvalloissa sovelletaan vastaavia vaatimuksia: ADA + Section 508 koskee valtion virastoja ja niiden alihankkijoita. Henkilökohtaisen blogin ei muodollisesti tarvitse noudattaa ohjeistusta, mutta merkittävällä osalla käyttäjistä on vammoja, mikä on vahva kaupallinen peruste.

Kyllä, kaupallisten sivustojen EU:ssa on noudatettava WCAG 2.2 AA -tasoa 28. kesäkuuta 2025 alkaen eurooppalaisen esteettömyyssäädöksen mukaisesti. Sakot määräävät jäsenvaltiot: summat voivat nousta satoihin tuhansiin euroihin lainkäyttöalueesta riippuen. Yhdysvalloissa vastaavat vaatimukset tulevat ADA:n ja Section 508:n kautta. Henkilökohtaisille ei-kaupallisille blogeille ei ole laillista velvoitetta, mutta esteettömyys laajentaa yleisöä.

Riittääkö, että asennan One Click Accessibilityn kaltaisen lisäosan?

Työkalupalkkilaajennus on avustava kerros, ei ratkaisu. Sen avulla käyttäjä voi vaihtaa kontrastia tai fonttikokoa, mutta se ei korjaa puuttuvia alt-tekstejä, rikkinäistä otsikkohierarkiaa tai näppäimistöllä saavuttamattomia ponnahdusikkunoita. Aloita natiivilla esteettömyydellä koodissa ja sisällössä, lisää työkalupalkki viimeisenä silauksena.

Ei. Työkalupalkki (One Click Accessibility, UserWay) on vain ylimääräinen "päällekkäiskerros". Se ei korvaa natiivia esteettömyyttä: se ei korjaa alt-tekstejä, otsikkohierarkiaa, näppäimistöansoja tai nimeämättömiä lomakekenttiä. Aloita korjaamalla koodi ja sisältö, työkalupalkki on viimeinen silaus.

Miten testaan sivuston ostamatta kalliita työkaluja?

Täysi kierros ilmaisilla työkaluilla: WAVE Extension (ensimmäinen nopea tarkistus) → Google Lighthouse (numeerinen pistemäärä + lista ongelmista) → manuaalinen näppäimistöläpikäynti (Tab/Enter/Escape) → NVDA Windowsilla tai VoiceOver Macilla (käy sivusto läpi näyttö suljettuna). Tämä riittää kattamaan valtaosan ongelmista.

Ilmainen kierros: WAVE Extension selaimeen → Google Lighthouse Chrome DevToolsissa → manuaalinen näppäimistöläpikäynti → NVDA (Windows) tai VoiceOver (macOS/iOS) ruudunlukijatestaukseen. Nämä neljä työkalua kattavat 90% tehtävistä. Maksullisia palveluita tarvitaan vain suurten projektien säännöllisiin auditointeihin.

Voiko visuaalisella rakentajalla (Elementor, WPBakery) tehdystä sivustosta tehdä esteettömän?

Voi, mutta se on vaikeampaa. Rakentajat tuottavat HTML:ää dynaamisesti, ja jotkin widgetit rikkovat otsikkohierarkian tai lisäävät div-kääreitä ilman semantiikkaa. Tarkista jokainen lohko erikseen WAVElla. Elementorin Pro-versio 3.15+ lisäsi aria-attribuuttien asetukset widgeteille, käytä niitä.

Voi, mutta se vaatii enemmän manuaalista työtä. Visuaalisilla rakentajilla on taipumus rikkoa otsikkohierarkia ja tuottaa liiallisia div-kääreitä. Tarkista tulos WAVElla jokaisen muutoksen jälkeen. Elementor Pro (3.15+) antaa asettaa ARIA-attribuutteja widgeteille, mikä ratkaisee ongelman osittain.

Kuinka usein sivuston esteettömyys pitäisi tarkistaa uudelleen?

Jokaisen merkittävän päivityksen jälkeen: uusi teema, uusi lisäosa, uudelleensuunnittelu, suuri sisältöjulkaisu. Minimikierto: aja Lighthouse ja käy avainsivut läpi näppäimistöllä kerran neljänneksessä. Automaattinen seuranta Accessibility Checker Pron avulla on perusteltua sivustoille, joilla on säännöllistä sisältöä.

Vähintään jokaisen suuren muutoksen (teeman vaihto, uusi lisäosa, uudelleensuunnittelu) jälkeen ja neljännesvuosittain ennaltaehkäisevänä toimenpiteenä. Sivustoille, joilla on säännöllisiä julkaisuja, automaattinen seuranta Accessibility Checker Pron avulla on perusteltua. Ruudunlukijatesti riittää puolen vuoden välein, jos koodipohja ei ole muuttunut.

Mitä tehdä WordPress-sivuston saavutettavuudelle juuri nyt

Älä odota täydellistä hetkeä. WCAG 2.2 AAA on tavoite, ei lähtökohta. Aloita kolmella toimenpiteellä tänään:

• Aja WAVE kotisivullasi. Korjaa punaiset virheet (yleensä 5-10 kappaletta), ne poistavat vakavimmat esteet.
• Navigoi sivustoa näppäimistöllä. Tab, Tab, Tab. Jos jäät jumiin, korjaa se. Jos fokus ei näy, lisää :focus-visible.
• Tarkista kolmen värin kontrasti: tekstin väri, painikkeen väri, linkin väri. Nosta ne tasolle 4,5:1.

Nämä kolme askelta, puoli tuntia työtä, ja leijonanosa tuloksesta on saavutettu. Loput, lisäosat, ruudunlukijat, ARIA, hoida vähitellen.

Jos sivusto on kaupallinen ja toimii EU:ssa, älä lykkää asiaa. EAA antaa valvontaviranomaisille todellista vipuvoimaa vuodesta 2025 alkaen. On parempi kohdata auditointi vihreällä Lighthouse-pistemäärällä kuin viranomaisen kirjeellä.