WCAG 2.2 -äänimääräystenmukaisuus 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 ja arvo. Euroopan esteettömyysasetus on ollut voimassa 28. kesäkuuta 2025 alkaen, ja se tekee vaatimuksista lakisääteisiä kaikille EU-asiakkaita palveleville sivustoille. WordPressin oletusäänisoitin ja useimmat kolmannen osapuolen äänilisäosat epäonnistuvat useissa näistä vaatimuksista ilman muutoksia.

Tämä opas on käytännön tarkistuslista, jota käytämme Mementorilla auditoidessamme WordPress-sivustoja WCAG 2.2 -vaatimustenmukaisuuden suhteen. Käsittelemme molemmat puolet: ääni sisältönä, jolla on omat esteettömyyssääntönsä, sekä ääni tekstisisällön esteettömyysominaisuutena.

Miksi äänimääräystenmukaisuus on tärkeää vuonna 2026

Kolme tekijää teki aiheesta kiireellisen vuonna 2025. EAA tuli voimaan 28. kesäkuuta 2025. WebAIM Million 2025 -raportti havaitsi, että 96,3 prosentilla kotisivuista oli havaittavia WCAG-puutteita. ADA-kanteet Yhdysvalloissa jatkoivat kasvuaan, ja WordPress-sivustot olivat näkyvästi esillä vuoden aikana vireille pannuissa yli 4 000 verkkosivuston esteettömyystapauksessa.

Auditoinneissa toistuva kaava on johdonmukainen. Sivustojen omistajat olettavat teeman hoitavan esteettömyyden. Teema perii äänilisäosan toiminnallisuudet. Äänilisäosa toimittaa painikkeita, jotka ovat liian pieniä, liukusäätimiä, jotka kaappaavat näppäimistökäyttäjät, ja kontrastitasoja, jotka epäonnistuvat jo ensimmäisessä manuaalisessa tarkistuksessa.

Kattava WCAG 2.2 -äänitarkistuslista

Kahdeksan onnistumisperustetta koskee suoraan ääntä WordPress-sivustolla. Alla oleva taulukko kuvaa kunkin merkityksen käytännössä, mitä WordPressin oletusääni tekee oikein tai väärin, ja miten TTSWP-soitin käsittelee asian. UUSI-merkinnällä varustetut kriteerit tulivat mukaan WCAG 2.2:ssa lokakuussa 2023.

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

Tekstivaihtoehdon mediakäytännöstä

Tässä on sääntö, jonka 95 prosenttia vaatimustenmukaisuusartikkeleista ohittaa. WCAG määrittelee tekstin mediavaihtoehdon mediaksi, joka ei esitä enempää tietoa kuin tekstissä on jo esitetty. Kun teksti puheeksi -narratiivi lukee olemassa olevan artikkelin, ääni on sivun tekstin mediavaihtoehto. Sivun teksti itse on transkriptio.

Tämä tarkoittaa, että artikkelin ääniversio ei tarvitse erillistä transkriptiotiedostoa. WebAIM selittää tämän selkeästi. Ehto on, että ääni on selkeästi merkitty mediavaihtoehdoksi, jotta käyttäjät ymmärtävät, etteivät he menetä tietoa ohittaessaan sen. Otsikko kuten "Kuuntele tämä artikkeli" tai soitin, jossa lukee "Artikkelin ääniversio", täyttää tämän vaatimuksen.

Poikkeus ei koske tilanteita, joissa ääni sisältää kommentaaria, musiikkia, jolla on merkitystä, tai osuuksia, joita ei ole tekstissä. Pelkkä sivun sisällön narratiivi kelpaa. Hyödynnämme tätä säännöllisesti neuvoidessamme julkaisija-asiakkaita, jotka huolestuvat siitä, että äänen lisääminen luo uusia transkriptiovelvollisuuksia.

Mitä uutta WCAG 2.2 toi äänivaatimuksiin

Kolme uutta tason AA perustetta vaikuttaa suoraan äänisoittimiin.

2.5.8 Kohteen koko (vähimmäis)

Jokainen vuorovaikutteinen säädin tarvitsee vähintään 24 × 24 CSS-pikselin kohtausalueen. Tämä on peruste, joka kaataa eniten WordPress-äänilisäosia. Auditoinneissamme kolmannen osapuolen äänilisäosia käyttävillä WordPress-sivustoilla ohitus taaksepäin ja eteenpäin -painikkeet jäävät toistuvasti alle kynnysarvon. Visuaaliset suunnittelijat optimoivat kompaktiuden ennen kuin WCAG 2.2 toi 24 pikselin säännön, ja harva lisäosan ylläpitäjä on pysynyt tahdissa. Oletusteemat pienentävät kohtauksia joskus entisestään.

Ratkaisu on yleensä täyte, ei kuvakkeen koko. 16-pikselin SVG-kuvake painikkeessa, jonka jokaisella puolella on 4 pikseliä täytettä, täyttää 24 pikselin kynnysarvon muuttamatta ulkoasua.

2.4.11 Kohdistus ei peitty

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

2.5.7 Vetämisliikkeet

Mukautetut toistopalkki- ja äänenvoimakkuusliukusäätimet, jotka toimivat vain vetämällä, epäonnistuvat tässä perusteessa. Jokaiselle vetämistoiminnolle tarvitaan yhden osoittimen vaihtoehto. Napsauttaminen edistymispalkin kohtaan täyttää vaatimuksen. Samoin tekee näppäimistön nuolinäppäinten tuki oikein rakennetussa role="slider"-elementissä.

Yleisimmät WordPress-äänivirheet oikeista auditoinneista

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

WordPressin ydinkomponentin oletusmukainen <audio>-lohko renderöi selaimen natiivin soittimen. Selaimen natiiveilla äänisäätimillä on pitkä historia epäjohdonmukaisesta käyttäytymisestä ruudunlukuohjelmien kanssa, ja nuolinäppäinten hallinta toistopään siirtämisessä 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 pysty luotettavasti siirtämään sijaintia näppäimistöllä. Ratkaisu on kääriä ääni mukautettuun soittimeen, joka paljastaa role="slider" asianmukaisilla ARIA-arvoattribuuteilla.

Lisäosasoittimien painikkeet toimitetaan alle 24 pikselin kynnyksellä. Visuaalinen suunnittelija optimoi kompaktiuden ennen kuin WCAG 2.2 toi säännön. Teemat ylikirjoittavat sitten lisäosan tyylit, mikä joskus pahentaa tilannetta ja joskus parantaa sitä.

Kiinteät äänipalkkit peittävät kohdistetun sisällön. Olemme nähneet tämän epäonnistuvan jokaisella sivustolla, joka käyttää kiinteää alatunnistetta ilman näppäimistönavigaation testaamista.

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

Vaatimustenmukaisen äänisoittimen rakentaminen: tekninen tarkistuslista

1. Kääri soitin role="region"-elementtiin, jossa on sitä kuvaava aria-label.
2. Käytä todellisia <button>-elementtejä toistoa, taukoa, ohitusta ja mykistystä varten. Ei koskaan <div>-elementtiä napsautustapahtumakäsittelijällä.
3. Aseta aria-pressed toistopainikeelle tilamuutoksen paljastamiseksi.
4. Anna jokaiselle säätimelle vähintään 24 × 24 CSS-pikselin kohdealue täytteellä.
5. Tee raahauspalkista ja äänenvoimakkuudesta role="slider" attribuuteilla aria-valuemin, aria-valuemax ja aria-valuenow, ja reagoi nuolinäppäimiin.
6. Tarjoa napsautus kohtaan -toiminto raahauspalkissa vetämisen vaihtoehtona.
7. Tarkista jokaisen tekstielementin ja merkityksellisen kuvakkeen kontrasti vähintään 4,5:1-suhteella.
8. Varmista, että kohdistusrenkaat ovat näkyviä eikä overflow-säännöt leikkaa niitä.
9. Jos soitin on kiinteä, jätä kohdistustilaa sen yläpuolelle tai tee siitä suljettava.
10. Merkitse teksti puheeksi -narratiivisoittimet nimellä "Artikkelin ääniversio", jotta mediavaihtoehdon poikkeus soveltuu selkeästi.

Yksinkertainen esteettömyyden täyttävä toistonappi 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>

Se on runko. Tyylittele painike, piilota natiivin range-elementin visuaaliset osat jos haluat mukautetun raidan, mutta säilytä alla oleva semantiikka.

Miten teksti puheeksi -narratiivi parantaa WCAG-vaatimustenmukaisuutta

Ääni ei ole vain sisältöä, jonka on oltava esteettömää. Se on esteettömyysominaisuus. Maailman terveysjärjestö arvioi, että 1,3 miljardia ihmistä eli noin 16 prosenttia maailman väestöstä elää merkittävän vamman kanssa. Monet heistä hyötyvät tekstisisällön monimoodisesta saatavuudesta: dysleksiasta, ADHD:stä, heikosta näöstä ja erilaisista kognitiivisista häiriöistä kärsivät lukevat mukavammin äänen ja tekstin yhdistelmällä.

Teksti puheeksi -narratiivin lisääminen on yksi harvoista esteettömyysinvestoinneista, joka auttaa käyttäjiä ennen kuin se täyttää auditointivaatimukset. TTS:n lisääminen WordPressiin vie alle 15 minuuttia Text to Speech – TTSWP -lisäosalla. Soitin toimitetaan WCAG 2.1 AA -vaatimusten mukaisilla oletuksilla, vähintään 24 pikselin kohdealueilla, näppäimistötuella ja asianmukaisilla ARIA-rooleilla.

Pienin ajonaikainen hyötykuorma on noin 35–40 KB pakattuna (151 KB pakkaamattomana) kattaen sekä JavaScript-soittimen logiikan että jaetun CSS:n. Suoritimme GTmetrix-testin julkaistulla artikkelilla soittimen ollessa aktiivisena ja saimme arvosanan A, jonka mukana olivat 93 prosentin suorituskyky, 99 prosentin rakenne, suurin sisältörikkainen maalaus 1,3 sekunnissa, kokonainen estämisaika 46 millisekunnissa ja kumulatiivinen asettelusiirtymä nollassa. Paketti latautuu laiskasti vain sivuilla, joilla soitin on käytössä, joten staattiset sivut ilman ääntä eivät kärsi suorituskykyrasitteesta.

Esteettömyysdokumentaatio löytyy esteettömyyssivultamme. Narratiivi käyttää ElevenLabs-generatiivista moottoria, joka parantaa prosodiaa niin, että kuulijat todella lukevat artikkelit loppuun sen sijaan, että luovuttaisivat robottimaisen luvun vuoksi.

Euroopan esteettömyysasetus käytännössä

EAA tuli täytäntöönpanokelpoiseksi 28. kesäkuuta 2025. Uusien EU-markkinoille sen jälkeen tuotujen digitaalisten palvelujen on noudatettava sitä heti. Olemassa olevilla palveluilla on aikaa 28. kesäkuuta 2030 saakka saattaa kaikki vaatimusten mukaiseksi. Direktiivi koskee kaikkia EU-asiakkaita palvelevia yrityksiä riippumatta siitä, missä yritys sijaitsee.

EAA:n viittaama tekninen standardi on EN 301 549. Nykyinen harmonisoitu versio (V3.2.1, elokuu 2021) perustuu WCAG 2.1 tason AA vaatimuksiin. Marraskuussa 2025 julkaistu luonnos V4.1.0 päivittää lausekkeet 9, 10 ja 11 WCAG 2.2:n mukaisiksi, ja lopullisen harmonisoinnin odotetaan tapahtuvan vuonna 2026. Kunnes päivitys julkaistaan EU:n virallisessa lehdessä, WCAG 2.1 AA pysyy laillisesti sitovana vähimmäisvaatimuksena, mutta suosittelemme tähtäämistä jo nyt versioon 2.2, koska siirtymä on kuukausien, ei vuosien päässä.

Sanktiot vaihtelevat jäsenvaltiosta toiseen. Saksalla ja Ranskalla on aktiivisin täytäntöönpanorakenne, ja kansalliset esteettömyysviranomaiset voivat tutkia valituksia ja määrätä sakkoja. Olemme nähneet norjalaisten ja saksalaisten asiakkaiden saavan muodollisia valituksia loppukäyttäjiltä kuukausien sisällä täytäntöönpanopäivästä, yleensä ääni- ja lomakekomponenteista. Valitukset saapuvat ennen sakkoja, joten kolmenkymmenen päivän korjausikkuna on yleensä saavutettavissa, jos tiimi on valmistautunut.

Vaatimustenmukaisuuden testaaminen

Automatisoidut työkalut havaitsevat noin 30–40 prosenttia ongelmista. Manuaalinen testaus on välttämätöntä loppuosalle, erityisesti näppäimistövuorovaikutukselle ja dynaamisissa tiloissa olevalle merkitykselliselle kontrastille.

• NVDA Windowsissa Chromen ja Firefoxin kanssa. Ilmainen.
• JAWS Windowsissa yritysasiakkaiden odotuksia varten.
• VoiceOver macOS:ssa ja iOS:ssa. Sisäänrakennettu.
• TalkBack Androidissa. Sisäänrakennettu.
• axe DevTools -selainlaajennus automaattisiin skannauksiin.
• Lighthouse Chrome DevToolsissa pikatestaukseen.
• Pelkkä näppäimistö -läpikäynti. Irrota hiiri ja käytä kaikkia soittimen säätimiä näppäimistöllä.

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

Usein kysytyt kysymykset

Vaatiiko WCAG 2.2 tekstitykset äänipodcasteille?

Ei. Tekstitykset (1.2.2) koskevat ennalta tallennettua videota synkronoidulla äänellä. Pelkälle äänisisällölle, kuten podcasteille, merkityksellinen peruste on 1.2.1, joka vaatii tekstivaihtoehdon, kuten transkription tai yksityiskohtaisen yhteenvedon. Tekstitykset ja transkriptiot palvelevat eri tarkoituksia. Podcast tarvitsee transkription. Videoopetusvideo tarvitsee sekä tekstitykset että kuvailutulkkauksen pelkälle visuaaliselle tiedolle.

Onko automaattinen äänentoisto laitonta EAA:n nojalla?

Ei laitonta, mutta rajoitettua. WCAG 1.4.2 Äänenhallinta, johon EAA viittaa EN 301 549:n kautta, vaatii, että yli kolme sekuntia automaattisesti soivalle äänelle on tarjottava tauko, pysäytys tai itsenäinen äänenvoimakkuuden säätö. Automaattinen toisto ilman tätä säätöä epäonnistuu tasolla A ja aiheuttaa vaatimustenvastaisuuslöydöksen. Useimmat täytäntöönpanoviranomaiset pitävät tätä selvänä rikkomuksena eikä raja-tapauksena.

Tarvitsenko transkription, jos artikkelillani on ääniversio?

Yleensä ei. Kun ääni on suora narratiivi artikkelin tekstistä eikä lisää uutta tietoa, artikkelin teksti itse on transkriptio WCAG:n "tekstin mediavaihtoehto" -määritelmän mukaan. Merkitse soitin selkeästi artikkelin ääniversioksi ja poikkeus soveltuu. Jos ääni sisältää kommentaaria, merkityksellisiä musiikkiosuuksia tai tekstissä esiintymättömiä osuuksia, erillinen transkriptio tarvitaan.

Mikä on äänisoittimien painikkeiden vähimmäiskoko WCAG 2.2:ssa?

Vuorovaikutteisten kohteiden on oltava vähintään 24 × 24 CSS-pikseliä onnistumisperusteen 2.5.8 Kohteen koko (vähimmäis) tason AA mukaan. Kohdealue sisältää täytteen, joten 16-pikselin kuvake neljän pikselin täytteellä joka puolella täyttää vaatimuksen. Poikkeuksia on tekstin sisäisille linkeille ja käyttäjäagentin määrittämille säätimille, mutta itsenäiset soittimen painikkeet eivät saa poikkeusta ja niiden on täytettävä kynnysarvo.

Koskeeko WCAG 2.2 WordPress.com-palvelussa ylläpidettyjä sivustoja?

Kyllä. WCAG koskee kaikkea verkkosisältöä riippumatta isännöintialustasta. WordPress.com-sivustoilla on sama oikeudellinen vastuu EAA:n, ADA:n ja vastaavien kansallisten lakien nojalla kuin itse isännöidyllä WordPressillä. Isännöintimalli ei muuta velvollisuutta. Se muuttaa sitä, kuinka paljon sivuston omistajalla on hallintaa soittimen koodiin. WordPress.com Business ja Commerce -suunnitelmat sallivat mukautetut lisäosat, alemmat tasot eivät.

Mistä aloittaa

Valitse yksi artikkeli sivustoltasi, tee äänisoittimelle pelkkä näppäimistö -läpikäynti ja tarkista jokainen painike 24 pikselin säännön suhteen. Tämä yksittäinen auditointi paljastaa, onko nykyinen asetuksesi lähellä WCAG 2.2 -vaatimustenmukaisuutta vai kaukana siitä. Siitä eteenpäin vaihtoehtoina on olemassa olevan soittimen korjaaminen tai sen korvaaminen soittimella, joka toimitetaan oletuksena vaatimusten mukaisena. Esteettömyysdokumentaatiomme kattaa konfiguraation, jota suosittelemme EAA-paineessa oleville sivustoille.