WCAG 2.2 -äänisaavutettavuus WordPressissä: 2026-opas

WordPress-äänen on täytettävä vähintään neljä WCAG 2.2 -onnistumisperustetta: 1.4.2 Äänenhallinta, 2.1.1 Näppäimistö, 2.5.8 Kohteen koko (uusi versiossa 2.2) ja 4.1.2 Nimi, rooli, arvo. Eurooppalainen esteettömyysdirektiivi on ollut voimassa 28. kesäkuuta 2025 alkaen, ja se tekee tästä lakisääteisen vaatimuksen kaikille EU-asiakkaita palveleville sivustoille. WordPressin oletusäänipelaaja ja useimmat kolmannen osapuolen äänilisäosat eivät täytä näitä vaatimuksia ilman muutoksia.

Tämä opas on käytännön tarkistuslista, jota käytämme Mementorilla auditoitaessa WordPress-sivustoja WCAG 2.2 -vaatimustenmukaisuuden osalta. Käsittelemme äänen molemmat puolet: äänen sisältönä, johon sovelletaan omia saavutettavuussääntöjä, sekä äänen tekstisisällön saavutettavuusominaisuutena.

Miksi äänisaavutettavuus on tärkeää vuonna 2026

Vuonna 2025 kolme tekijää teki aiheesta kiireellisen. EAD tuli täytäntöönpantavaksi 28. kesäkuuta 2025. WebAIM Million 2025 -raportti havaitsi, että 96,3 prosentilla etusivuista oli tunnistettavia WCAG-puutteita. ADA-oikeudenkäynnit Yhdysvalloissa jatkoivat kasvuaan, ja WordPress-sivustot olivat näkyvästi esillä yli 4 000 verkkosaavutettavuustapauksessa vuoden aikana.

Auditoinneissamme havaitsemamme kaava toistuu. Sivustonhallinnoijat olettavat teeman hoitavan saavutettavuuden. Teema perii sen, mitä äänilisäosa toimittaa. Äänilisäosa toimittaa painikkeet, jotka ovat liian pieniä, liukusäätimiä, jotka estävät näppäimistön käyttäjien etenemisen, ja kontrastisuhteet, jotka epäonnistuvat ensimmäisessä manuaalisessa tarkistuksessa.

Täydellinen WCAG 2.2 -äänisaavutettavuuden tarkistuslista

Kahdeksan onnistumisperustetta koskee suoraan ääntä WordPress-sivustolla. Alla oleva taulukko kuvaa kunkin käytännön merkityksen, sen, mitä WordPressin oletusäänenkäsittely tekee oikein tai väärin, sekä sen, miten TTSWP-pelaaja käsittelee ne. Merkinnällä UUSI varustetut perusteet lisättiin WCAG 2.2:een lokakuussa 2023.

W3C:n Media Accessibility User Requirements -sivu on näiden kriteerien virallinen lähde. Keskitymme yllä oleviin kahdeksaan, koska ne koskevat äänipelaajia itsessään. Tekstitykset (1.2.2) ja kuvailutulkkaus (1.2.3) ovat myös merkityksellisiä, mutta ne koskevat videota eivät pelkkää ääninarraatiota.

Tekstin mediakorvike -poikkeus

Tässä on sääntö, jonka 95 prosenttia vaatimustenmukaisuusartikkeleista jättää huomiotta. WCAG määrittelee tekstin mediakorviketiedoston mediaksi, joka ei esitä enempää tietoa kuin teksti jo sisältää. Kun tekstistä puheeksi -narratio lukee olemassa olevan artikkelin, ääni on sivun tekstin mediakorvike. Sivun teksti itse toimii transkriptiona.

Tämä tarkoittaa, että artikkelin tekstistä puheeksi -ääniversio ei tarvitse erillistä transkriptiotiedostoa. WebAIM selittää tämän selkeästi. Ehtona on, että ääni on selkeästi merkitty mediakorvikkeeksi, jotta käyttäjät ymmärtävät, etteivät he menetä tietoa ohittaessaan sen. Otsikko kuten "Kuuntele tämä artikkeli" tai pelaajan merkintä "Artikkelin ääniversio" täyttää tämän vaatimuksen.

Poikkeus ei päde, jos ääni sisältää kommentteja, merkityksellisiä musiikkitaustoja tai osia, joita ei ole tekstissä. Pelkkä sivun sisällön narratio täyttää ehdot. Tähän turvaudumme säännöllisesti neuvoessamme kustantaja-asiakkaita, jotka pelkäävät äänen lisäämisen synnyttävän uusia transkriptiovelvoitteita.

Mitä uutta WCAG 2.2 tuo äänelle

Kolme uutta AA-tason perustetta vaikuttaa suoraan äänipelaajiin.

2.5.8 Kohteen koko (minimi)

Jokaisen vuorovaikutteisen ohjaimen kohteen on oltava vähintään 24 x 24 CSS-pikseliä. Tämä on peruste, joka kaataa eniten WordPress-äänilisäosia. Auditoinneissamme kolmannen osapuolen äänilisäosia käyttävillä WordPress-sivustoilla taaksepäin- ja eteenpäin-hyppypainikkeet jäävät toistuvasti alle kynnysarvon. Visuaalisuunnittelijat optimoivat kompaktiuden ennen kuin WCAG 2.2 esitteli 24 pikselin säännön, eikä harva lisäosan ylläpitäjä ole päivittänyt käytäntöjään. Teeman oletustyylit voivat joskus pienentää kohteita entisestään.

Korjaus on yleensä täytteen lisääminen eikä kuvakekoon muuttaminen. 16 pikselin SVG-kuvake painikkeessa, jossa on 4 pikselin täyte joka puolella, saavuttaa 24 pikselin kynnyksen muuttamatta visuaalista ulkoasua.

2.4.11 Kohdistus ei peitä

Sivun alalaidassa olevat kiinteät äänipalkkit peittävät sen, mihin näppäimistön käyttäjä on kohdistettuna. Jos kohdistettu linkki jää palkin taakse, peruste epäonnistuu. Korjaus on joko tehdä palkista suljettava, jättää tilaa kohdistuskohteen yläpuolelle tai käyttää scroll-padding-bottom -ominaisuutta dokumentissa, jotta kohdistetut elementit pysyvät näkyvissä.

2.5.7 Vetämisliikkeet

Mukautetut raapimispalkit ja äänenvoimakkuuden liukusäätimet, jotka toimivat vain vetämällä, epäonnistuvat tässä perusteessa. Jokaiselle vetämistoiminnolle tarvitaan yhden osoittimen vaihtoehto. Napsautus kohtaan edistymispalkilla täyttää vaatimuksen. Samoin nuolinäppäimistöohjaus oikein rakennetussa role="slider" -elementissä.

Yleisimmät WordPress-ääniongelmat oikeista auditoinneista

Samat kaavat toistuvat asiakassivustoilla. Näemme neljä ongelmaa useimmin.

WordPressin oletusydimen <audio>-lohko renderöi selaimen natiivin pelaajan. Selaimen natiiveilla ääniohjauksilla on pitkä historia epäjohdonmukaisesta toiminnasta ruudunlukijoiden kanssa, ja nuolinäppäinten ohjaus toistokohdan siirtämiseksi vaihtelee Chromen, Firefoxin ja Safarin välillä. NVDA:ta tai JAWSia käyttävät käyttäjät kuulevat usein aikaleimat mutta eivät voi luotettavasti siirtää kohtaa näppäimistöllä. Korjaus on kääriä ääni mukautettuun pelaajaan, joka paljastaa role="slider" asianmukaisilla ARIA-arvoattribuuteilla.

Lisäosien pelaajien painikkeet ovat alle 24 pikselin kynnyksen. Visuaalisuunnittelija optimoi kompaktiuden ennen kuin WCAG 2.2 esitteli säännön. Teemat ohittavat sitten lisäosan tyylit, mikä joskus parantaa ja joskus huonontaa tilannetta.

Kiinteät äänipalkkit piilottavat kohdistettua sisältöä. Olemme nähneet tämän epäonnistuvan jokaisella sivustolla, joka käyttää kiinteää alatunnistepeluria ilman näppäimistönavigaation testaamista.

Aaltokuvioiden kontrasti on toistuvasti alle 4,5:1. Suunnittelijat rakastavat pehmeää harmaata aaltoa valkoisella taustalla. Ruudunlukijat eivät välitä, mutta heikkonäköiset käyttäjät välittävät, ja 1.4.3 epäonnistuu.

Saavutettavan äänipelaajan rakentaminen: tekninen tarkistuslista

1. Kääri pelaaja role="region" -elementtiin, jolla on sitä kuvaava aria-label.
2. Käytä oikeaa <button>-elementtiä toiston, tauon, hyppäyksen ja mykistyksen ohjaukseen. Älä koskaan käytä <div>-elementtiä napsauksenkäsittelijällä.
3. Aseta aria-pressed toistopainikkeelle kytkintilan paljastamiseksi.
4. Anna jokaiselle ohjaimelle vähintään 24 x 24 CSS-pikselin kohdekoko täytteen avulla.
5. Tee raapimis- ja äänenvoimakkuussäätimistä role="slider" -elementtejä, joilla on aria-valuemin, aria-valuemax ja aria-valuenow, ja reagoi nuolinäppäimiin.
6. Tarjoa napsautus kohtaan -toiminto raapimispalkilla vetämisen vaihtoehtona.
7. Testaa kontrasti kaikissa tekstielementeissä ja merkityksellisissä kuvakkeissa vähintään 4,5:1-suhteella.
8. Varmista, että kohdistusrenkaat ovat näkyvissä eivätkä koskaan leikkaudu overflow-sääntöjen takia.
9. Jos pelaaja on kiinteä, jätä kohdistustila sen yläpuolelle tai tee siitä suljettava.
10. Merkitse tekstistä puheeksi -narratiopelaajat nimellä "Artikkelin ääniversio", jotta mediakorvike-poikkeus soveltuu selkeästi.

Minimaalinen saavutettava toistopainike näyttää tältä.

<div role="region" aria-label="Article audio player">
  <button type="button"
          aria-pressed="false"
          aria-label="Play article narration"
          style="min-width:24px;min-height:24px;padding:8px">
    <svg aria-hidden="true" width="16" height="16">...</svg>
  </button>
  <input type="range"
         aria-label="Playback position"
         min="0" max="100" value="0">
</div>

Tämä on runko. Tyylittele painike, piilota natiivit range-visuaalit halutessasi mukautetun raidan, mutta säilytä taustalla olevat semantiikat.

Miten tekstistä puheeksi -narratio parantaa WCAG-vaatimustenmukaisuutta

Ääni ei ole vain sisältöä, joka on tehtävä saavutettavaksi. Se on saavutettavuusominaisuus. Maailman terveysjärjestö arvioi, että 1,3 miljardia ihmistä, noin 16 prosenttia maailman väestöstä, elää merkittävän vamman kanssa. Monet heistä hyötyvät tekstisisällön multimodaalisesta saatavuudesta: lukihäiriöiset, ADHD-henkilöt, heikkonäköiset ja erilaisista kognitiivisista vaikeuksista kärsivät ihmiset lukevat mukavammin äänen ja tekstin yhdistelmällä.

Tekstistä puheeksi -narration lisääminen on yksi harvoista saavutettavuusinvestoinneista, joka auttaa käyttäjiä ennen kuin se täyttää auditoinnin vaatimukset. TTS:n lisääminen WordPressiin vie alle 15 minuuttia Teksti puheeksi – TTSWP -lisäosalla. Pelaaja toimitetaan WCAG 2.1 AA -vaatimusten mukaisilla oletusarvoilla, vähintään 24 pikselin kohteilla, näppäimistötuella ja asianmukaisilla ARIA-rooleilla.

Minimaalinen ajonaikakuorma on noin 35–40 KB pakattuna (151 KB pakkaamattomana) ja kattaa sekä JavaScript-pelaajalogiikan että jaetun CSS:n. Ajoimme GTmetrix-testin julkaistulla artikkelilla, jossa pelaaja oli aktiivisena, ja saimme A-arvosanan: 93 % suorituskyky, 99 % rakenne, suurin sisältörenderöinti 1,3 sekunnissa, kokonaisestointiaika 46 millisekuntia ja kumulatiivinen asettelumuutos nolla. Paketti latautuu laiskasti vain sivuilla, jotka sisältävät pelaajan, joten staattiset sivut ilman ääntä eivät kanna ylimääräistä kuormaa.

Saavutettavuusdokumentaatio löytyy saavutettavuuden luottamussivultamme. Narratio käyttää ElevenLabsin generatiivista moottoria, joka parantaa prosodiaa niin paljon, että kuuntelijat todella lukevat artikkelit loppuun sen sijaan, että luopuisivat robottimaisen luvun takia.

Eurooppalainen esteettömyysdirektiivi käytännössä

EAD tuli täytäntöönpantavaksi 28. kesäkuuta 2025. Uusien digitaalisten palvelujen, jotka on asetettu EU:n markkinoille tuon päivämäärän jälkeen, on noudatettava sitä nyt. Olemassa olevilla palveluilla on aikaa 28. kesäkuuta 2030 asti saattaa kaikki vaatimusten mukaiseksi. Direktiivi koskee kaikkia EU-asiakkaita palvelevia yrityksiä riippumatta siitä, missä yritys sijaitsee.

EAD:n viittaama tekninen standardi on EN 301 549. Nykyinen harmonisoitu versio (V3.2.1, elokuu 2021) perustuu WCAG 2.1 AA -tasoon. Luonnosversio V4.1.0, julkaistu marraskuussa 2025, päivittää lausekkeet 9, 10 ja 11 WCAG 2.2:n mukaisiksi, ja lopullinen harmonisointi odotetaan vuoden 2026 aikana. Kunnes päivitys mainitaan EU:n virallisessa lehdessä, WCAG 2.1 AA pysyy oikeudellisesti sitovana minimistandardina, mutta suosittelemme jo nyt tähtäämään WCAG 2.2:een, koska siirtymä on kuukausien eikä vuosien päässä.

Sakot vaihtelevat jäsenvaltion mukaan. Saksalla ja Ranskalla on aktiivisin täytäntöönpanoinfrastruktuuri, ja kansalliset saavutettavuusviranomaiset voivat tutkia valituksia ja määrätä sakkoja. Olemme nähneet norjalaisten ja saksalaisten asiakkaiden saavan virallisia valituksia loppukäyttäjiltä kuukausien kuluessa täytäntöönpanopäivästä, yleensä ääni- ja lomakekomponenteista. Valitukset tulevat ennen sakkoja, joten 30 päivän korjausikkuna on yleensä saavutettavissa valmistautuneelle tiimille.

Vaatimustenmukaisuuden testaaminen

Automaattiset työkalut havaitsevat noin 30–40 prosenttia ongelmista. Manuaalinen testaus vaaditaan lopuille, erityisesti näppäimistövuorovaikutuksessa ja merkityksellisessä kontrastissa dynaamisissa tiloissa.

• NVDA Windowsilla Chromen ja Firefoxin kanssa. Ilmainen.
• JAWS Windowsilla yritysasiakkaiden odotuksia varten.
• VoiceOver macOS:lla ja iOS:lla. Sisäänrakennettu.
• TalkBack Androidilla. Sisäänrakennettu.
• axe DevTools -selainlaajennus automaattisiin skannauksiin.
• Lighthouse Chromen DevToolsissa nopeisiin tarkistuksiin.
• Pelkkä näppäimistö -läpikäynti. Irrota hiiri ja käytä kaikkia pelaajan ohjaimia.

Pelkkä näppäimistö -läpikäynti on yksittäinen tehokkain testi. Jos pelaaja toimii ilman hiirtä, suurin osa WCAG 2.2 -vaatimuksista on jo täytetty.

Usein kysytyt kysymykset

Vaatiiko WCAG 2.2 tekstityksiä äänipodcasteille?

Ei. Tekstitykset (1.2.2) koskevat esinauhottua videota synkronoidulla äänellä. Vain ääni -sisällölle, kuten podcasteille, asiaa koskeva peruste on 1.2.1, joka edellyttää tekstivaihtoehtoa, kuten transkriptiota tai yksityiskohtaista yhteenvetoa. Tekstitykset ja transkriptiot palvelevat eri tarkoituksia. Podcast tarvitsee transkription. Videoopetusohjelmaan tarvitaan sekä tekstitykset että kuvailutulkkaus vain visuaalisille tiedoille.

Onko automaattisesti toistuva ääni laitonta EAD:n mukaan?

Ei laitonta, mutta rajoitettua. WCAG 1.4.2 Äänenhallinta, johon EAD viittaa EN 301 549:n kautta, edellyttää, että yli kolme sekuntia automaattisesti toistuvalle äänelle on tarjottava tauko, pysäytys tai itsenäinen äänenvoimakkuuden säädin. Automaattinen toisto ilman tätä ohjainta epäonnistuu A-tasolla ja luo vaatimustenvastaisuushavainnon. Useimmat valvontaelimet käsittelevät tätä selvänä rikkomuksena eikä rajanatapauksena.

Tarvitsenko transkription, jos minulla on artikkelin ääniversio?

Yleensä ei. Kun ääni on suora narratio artikkelitekstin sisällöstä eikä lisää uutta tietoa, artikkeliteksti itse toimii transkriptiona WCAG:n "tekstin mediakorvike" -määritelmän mukaan. Merkitse pelaaja selkeästi artikkelin ääniversioksi, niin poikkeus soveltuu. Jos ääni sisältää kommentteja, merkityksellistä musiikkia tai osia, joita ei ole tekstissä, tarvitset erillisen transkription.

Mikä on äänipelaajien painikkeiden minimikoko WCAG 2.2:ssa?

Vuorovaikutteisten kohteiden on oltava vähintään 24 x 24 CSS-pikseliä onnistumisperusteen 2.5.8 Kohteen koko (minimi) AA-tason mukaisesti. Kohde sisältää täytteen, joten 16 pikselin kuvake, jossa on 4 pikselin täyte joka puolella, täyttää vaatimuksen. Poikkeuksia on tekstin sisäisille linkeille ja käyttäjäagentin määrittelemille ohjauksille, mutta itsenäisille pelaajapainikkeille ei ole poikkeuksia, ja ne on saavutettava kynnysarvo.

Sovelletaanko WCAG 2.2:ta WordPress.com-isännöityihin sivustoihin?

Kyllä. WCAG koskee kaikkea verkkosisältöä riippumatta isännöintialustasta. WordPress.com-sivustot ovat saman oikeudellisen vastuun alaisia EAD:n, ADA:n ja vastaavien kansallisten lakien nojalla kuin itse isännöidyt WordPress-sivustot. Isännöintimalli ei muuta velvollisuutta. Muuttuva tekijä on se, kuinka paljon sivustonhallinnoijalla on kontrollia pelaajan merkintäkieleen. WordPress.com Business ja Commerce -suunnitelmat sallivat mukautetut lisäosat, alemmat tasot eivät.

Mistä aloittaa

Valitse yksi sivustosi julkaisu, tee näppäimistöläpikäynti äänipelaajalle ja tarkista jokainen painike 24 pikselin säännön mukaan. Tämä yksittäinen auditointi paljastaa, onko nykyinen asennuksesi lähellä WCAG 2.2 -vaatimustenmukaisuutta vai kaukana siitä. Sen jälkeen vaihtoehtona on joko korjata olemassa oleva pelaaja tai korvata se pelaajalla, joka täyttää vaatimukset oletuksena. Saavutettavuusdokumentaatiomme kattaa kokoonpanon, jota suosittelemme EAD-paineen alla oleville sivustoille.