WCAG 2.2 Audio-toegankelijkheid voor WordPress: Gids 2026

WordPress-audio moet aan minimaal vier WCAG 2.2-succescriteria voldoen: 1.4.2 Audiobediening, 2.1.1 Toetsenbord, 2.5.8 Doelgrootte (nieuw in 2.2) en 4.1.2 Naam, Rol, Waarde. De Europese Toegankelijkheidswet, van kracht sinds 28 juni 2025, maakt dit wettelijk verplicht voor elke site die EU-klanten bedient. De standaard WordPress-audiospeler en de meeste audioplug-ins van derden voldoen zonder aanpassingen niet aan meerdere van deze vereisten.

Deze gids is de praktische checklist die wij bij Mementor gebruiken bij audits van WordPress-sites op WCAG 2.2-conformiteit. We behandelen beide kanten van het audiovraagstuk: audio als inhoud met eigen toegankelijkheidsregels, en audio als toegankelijkheidsfunctie voor tekstinhoud.

Waarom audio-naleving in 2026 niet te negeren is

Drie ontwikkelingen kwamen in 2025 samen en maakten dit onderwerp urgent. De EAA trad op 28 juni 2025 in werking. Het WebAIM Million 2025-rapport stelde vast dat 96,3% van de homepagina's aantoonbare WCAG-fouten bevatte. ADA-rechtszaken in de Verenigde Staten bleven toenemen, waarbij WordPress-sites prominent aanwezig waren in de meer dan 4.000 ingediende webtoegankelijkheidszaken dat jaar.

Het patroon dat wij in onze audits zien is steeds hetzelfde. Sitebeheerders gaan ervan uit dat hun thema toegankelijkheid regelt. Het thema neemt over wat de audioplug-in meelevert. De audioplug-in levert knoppen die te klein zijn, schuifregelaars die toetsenbordgebruikers blokkeren en contrastwaarden die bij de eerste handmatige controle al mislukken.

De volledige WCAG 2.2-audiochecklist

Acht succescriteria hebben direct betrekking op audio op een WordPress-site. De onderstaande tabel legt per criterium uit wat het in de praktijk betekent, wat de standaard WordPress-audiospeler goed of fout doet, en hoe de TTSWP-speler ermee omgaat. Criteria gemarkeerd met NIEUW zijn toegevoegd in WCAG 2.2 (oktober 2023).

De W3C-pagina Media Accessibility User Requirements is de gezaghebbende bron voor deze criteria. We richten ons op de acht bovenstaande omdat ze direct van toepassing zijn op audiospelers. Ondertiteling (1.2.2) en audiobeschrijving (1.2.3) zijn ook relevant, maar gelden voor video en niet voor pure gesproken tekst.

De uitzondering voor media-alternatief voor tekst

Dit is de regel die 95% van de nalevingsartikelen overslaat. WCAG definieert een media-alternatief voor tekst als media die niet meer informatie bevat dan al in tekst aanwezig is. Wanneer tekst-naar-spraak een bestaand artikel voorleest, is de audio een media-alternatief voor de paginatekst. De paginatekst zelf is het transcript.

Een TTS-audioversie van een artikel heeft dus geen apart transcriptbestand nodig. WebAIM legt dit helder uit. De voorwaarde is dat de audio duidelijk gelabeld moet zijn als media-alternatief, zodat gebruikers begrijpen dat ze geen informatie missen door het te overslaan. Een koptekst als "Luister naar dit artikel" of een speler met het label "Audioversie van dit bericht" volstaat.

De uitzondering geldt niet als de audio commentaar, achtergrondmuziek met betekenis, of secties bevat die niet in de tekst staan. Puur voorlezen van de pagina-inhoud kwalificeert wel. Wij vertrouwen hier regelmatig op bij het adviseren van uitgeverijklanten die zich zorgen maken dat het toevoegen van audio nieuwe transcriptverplichtingen schept.

Wat er nieuw is voor audio in WCAG 2.2

Drie nieuwe Level AA-criteria hebben direct invloed op audiospelers.

2.5.8 Doelgrootte (minimum)

Elk interactief bedieningselement heeft een doeloppervlak nodig van minimaal 24 bij 24 CSS-pixels. Dit is het criterium dat de meeste WordPress-audioplug-ins laat struikelen. In onze audits van WordPress-sites met audioplug-ins van derden voldoen de terug- en vooruitspringknoppen stelselmatig niet aan de drempelwaarde. Visuele ontwerpers optimaliseerden voor compactheid vóórdat WCAG 2.2 de 24-pixelregel introduceerde, en weinig plug-in-onderhoudsteams hebben dit bijgewerkt. Standaard themaopmaak verkleint de doeloppervlakken soms nog verder.

De oplossing is meestal padding toevoegen, niet het pictogram vergroten. Een SVG-pictogram van 16 pixels in een knop met 4 pixels padding aan elke kant haalt de drempel van 24 pixels zonder dat het uiterlijk verandert.

2.4.11 Focus niet verborgen

Vaste audiobalkjes aan de onderkant van de pagina bedekken het element waarop de toetsenbordgebruiker gefocust is. Als een gefocuste link achter de balk verdwijnt, faalt het criterium. De oplossing is de balk wegklikbaar maken, ruimte boven het focusdoel laten, of scroll-padding-bottom op het document instellen zodat gefocuste elementen zichtbaar blijven.

2.5.7 Sleepbewegingen

Aangepaste voortgangsbalkjes en volumeschuifregelaars die alleen via slepen werken, falen dit criterium. Elke sleepinteractie vereist een alternatief met één aanwijzer. Klikken op een positie in de voortgangsbalk voldoet daaraan. Pijltoetsbediening op een correct gebouwde role="slider" ook.

Veelvoorkomende WordPress-audiofouten uit echte audits

De patronen herhalen zich op elke klantsite. We zien vier fouten het vaakst.

Het standaard WordPress-kernblok <audio> toont de native browserplayer. Native audiobediening heeft een lange geschiedenis van inconsistent gedrag met schermlezers, en pijltoetsbediening van de afspeelpositie verschilt tussen Chrome, Firefox en Safari. Gebruikers van NVDA of JAWS horen de tijdcodes wel maar kunnen de positie niet betrouwbaar via het toetsenbord verplaatsen. De oplossing is audio in een aangepaste speler te wikkelen die role="slider" met de juiste ARIA-waarde-attributen blootstelt.

Plug-in-spelers leveren knoppen af die kleiner zijn dan de 24-pixeldrempel. De visuele ontwerper optimaliseerde voor compactheid vóórdat WCAG 2.2 de regel invoerde. Thema's overschrijven vervolgens de plug-instijlen, wat het soms slechter en soms beter maakt.

Vaste audiobalkjes verbergen gefocuste inhoud. We hebben dit zien mislukken op elke site die een vaste voetbalkspeler gebruikt zonder toetsenbordnavigatie te testen.

Het contrast van golfvormen ligt stelselmatig onder de 4,5:1. Ontwerpers houden van de zachte grijze golf op wit. Schermlezers trekken zich er niets van aan, maar slechtziende gebruikers wel, en 1.4.3 faalt dan.

Een toegankelijke audiospeler bouwen: de technische checklist

1. Wikkel de speler in role="region" met een beschrijvend aria-label.
2. Gebruik een echte <button> voor afspelen, pauzeren, overslaan en dempen. Nooit een <div> met een klikhandler.
3. Stel aria-pressed in op de afspeelknop om de schakelstatus zichtbaar te maken.
4. Geef elk bedieningselement een minimaal doeloppervlak van 24 bij 24 CSS-pixels via padding.
5. Maak schuifregelaar en volume role="slider" met aria-valuemin, aria-valuemax en aria-valuenow, en reageer op pijltoetsen.
6. Bied klikken op positie aan op de voortgangsbalk als alternatief voor slepen.
7. Controleer het contrast van elk tekstelement en betekenisvol pictogram op minimaal 4,5:1.
8. Zorg dat focusringen zichtbaar zijn en nooit worden afgesneden door overflow-regels.
9. Als de speler vastzit, laat dan focusruimte erboven of maak hem wegklikbaar.
10. Label TTS-spraakspelers als "Audioversie van dit artikel" zodat de uitzondering voor media-alternatief correct van toepassing is.

Een minimale toegankelijke afspeelknop ziet er zo uit.

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

Dat is de basis. Geef de knop opmaak, verberg de native schuifregelaarweergave als je een eigen balk wilt, maar behoud de onderliggende semantiek.

Hoe TTS-spraak de algehele WCAG-conformiteit verbetert

Audio is niet alleen inhoud die toegankelijk gemaakt moet worden. Het is zelf een toegankelijkheidsfunctie. De Wereldgezondheidsorganisatie schat dat 1,3 miljard mensen, ongeveer 16% van de wereldbevolking, met een significante beperking leeft. Velen van hen profiteren van multimodale toegang tot tekstinhoud: mensen met dyslexie, ADHD, slechtziendheid en diverse cognitieve beperkingen lezen comfortabeler met audio naast tekst.

Het toevoegen van tekst-naar-spraak is een van de weinige toegankelijkheidsinvesteringen die gebruikers helpt vóórdat een audit wordt doorstaan. TTS aan WordPress toevoegen kost minder dan 15 minuten met de plug-in Tekst naar Spraak – TTSWP. De speler wordt geleverd met standaardinstellingen die conform WCAG 2.1 AA zijn, doeloppervlakken van 24 pixels of groter, toetsenbordondersteuning en de juiste ARIA-rollen.

De minimale runtime-payload is ongeveer 35 tot 40 KB gzipped (151 KB onverkleind) voor zowel de JavaScript-spelerlogica als gedeelde CSS. We hebben GTmetrix uitgevoerd op een gepubliceerd artikel met actieve speler en scoorden een A met 93% prestaties, 99% structuur, Largest Contentful Paint van 1,3 seconden, Total Blocking Time van 46 milliseconden en Cumulative Layout Shift van nul. De bundle laadt alleen lazy op pagina's met een speler, zodat statische pagina's zonder audio geen overhead dragen.

De toegankelijkheidsdocumentatie staat op onze toegankelijkheids-trustpagina. De spraak maakt gebruik van de generatieve engine van ElevenLabs, die de prosodie voldoende verbetert zodat luisteraars artikelen daadwerkelijk afmaken in plaats van afhaken bij een robotachtige stem.

De Europese Toegankelijkheidswet in de praktijk

De EAA werd op 28 juni 2025 handhaafbaar. Nieuwe digitale diensten die na die datum op de EU-markt worden gebracht, moeten nu al voldoen. Bestaande diensten hebben tot 28 juni 2030 om alles op orde te brengen. De richtlijn geldt voor elk bedrijf dat EU-klanten bedient, ongeacht waar het bedrijf gevestigd is.

De technische norm waarnaar de EAA verwijst is EN 301 549. De huidige geharmoniseerde versie (V3.2.1, augustus 2021) is gebouwd op WCAG 2.1 Level AA. Concept V4.1.0 gepubliceerd in november 2025 werkt clausules 9, 10 en 11 bij om aan te sluiten op WCAG 2.2, met definitieve harmonisatie verwacht in de loop van 2026. Tot die update in het Publicatieblad van de EU wordt opgenomen, blijft WCAG 2.1 AA het wettelijk bindende minimum, maar wij adviseren nu al te richten op 2.2 omdat de overgang eerder maanden dan jaren duurt.

Sancties verschillen per lidstaat. Duitsland en Frankrijk hebben de meest actieve handhavingsinfrastructuur, met nationale toegankelijkheidsautoriteiten die bevoegd zijn klachten te onderzoeken en boetes op te leggen. We hebben gezien dat Nederlandse en Duitse klanten formele klachten van eindgebruikers ontvingen binnen enkele maanden na de handhavingsdatum, meestal over audio- en formuliercomponenten. De klachten komen voor de boetes, dus een herstelperiode van dertig dagen is haalbaar als het team erop voorbereid is.

Hoe u de naleving test

Geautomatiseerde tools detecteren ongeveer 30 tot 40 procent van de problemen. Handmatig testen is vereist voor de rest, met name voor toetsenbordinteractie en betekenisvol contrast bij dynamische staten.

• NVDA op Windows met Chrome en Firefox. Gratis.
• JAWS op Windows voor zakelijke clientverwachtingen.
• VoiceOver op macOS en iOS. Ingebouwd.
• TalkBack op Android. Ingebouwd.
• axe DevTools browserextensie voor geautomatiseerde scans.
• Lighthouse in Chrome DevTools voor snelle controles.
• Alleen toetsenbord doorlopen. Muis loskoppelen en elk bedieningselement van de speler bedienen.

De toetsenbord-enige doorloop is de meest effectieve test. Als de speler zonder muis werkt, is al het grootste deel van WCAG 2.2 al afgedekt.

Veelgestelde vragen

Vereist WCAG 2.2 ondertiteling voor audiopodcasts?

Nee. Ondertiteling (1.2.2) geldt voor vooraf opgenomen video met gesynchroniseerde audio. Voor alleen-audio-inhoud zoals podcasts is het relevante criterium 1.2.1, dat een tekstalternatief vereist zoals een transcript of een uitgebreide samenvatting. Ondertiteling en transcripten dienen verschillende doelen. Een podcast heeft het transcript nodig. Een videotutorial heeft zowel ondertiteling als audiobeschrijving nodig voor visuele informatie.

Is automatisch afspelende audio verboden onder de EAA?

Niet verboden, maar wel aan banden gelegd. WCAG 1.4.2 Audiobediening, waarnaar de EAA verwijst via EN 301 549, vereist dat audio die automatisch langer dan drie seconden speelt een pauze-, stop- of onafhankelijke volumebediening biedt. Automatisch afspelen zonder die bediening faalt Level A en levert een niet-nalevingsbevinding op. De meeste handhavingsinstanties beschouwen dit als een duidelijke overtreding, niet als een grensgevallen.

Heb ik een transcript nodig als ik een audioversie van mijn artikel heb?

Meestal niet. Wanneer de audio een directe voorlezing is van de artikeltekst en geen nieuwe informatie toevoegt, is de artikeltekst zelf het transcript onder de WCAG-definitie van "media-alternatief voor tekst". Label de speler duidelijk als audioversie van het artikel en de uitzondering is van toepassing. Als de audio commentaar, muziek met betekenis of secties bevat die niet in de tekst staan, heeft u wel een apart transcript nodig.

Wat is de minimale knopgrootte voor audiospelers in WCAG 2.2?

Interactieve doeloppervlakken moeten minimaal 24 bij 24 CSS-pixels zijn op basis van succescriterium 2.5.8 Doelgrootte (minimum) op niveau AA. Het doeloppervlak omvat padding, dus een pictogram van 16 pixels met 4 pixels padding aan elke kant voldoet aan de eis. Er bestaan uitzonderingen voor inline-koppelingen in tekst en bediening die door de user agent wordt bepaald, maar zelfstandige spelerknknoppen vallen er niet onder en moeten de drempelwaarde halen.

Geldt WCAG 2.2 ook voor WordPress.com-gehoste sites?

Ja. WCAG geldt voor alle webinhoud, ongeacht het hostingplatform. WordPress.com-sites lopen onder de EAA, de ADA en vergelijkbare nationale wetten dezelfde juridische risico's als zelfgehoste WordPress. Het hostingmodel verandert de verplichting niet. Wat wel verandert is hoeveel controle de sitebeheerder heeft over de speleropmaak. WordPress.com Business- en Commerce-abonnementen staan aangepaste plug-ins toe, lagere abonnementen niet.

Waar te beginnen

Kies één bericht op uw site, doorloop de audiospeler alleen met het toetsenbord en controleer elke knop op de 24-pixelregel. Die ene audit laat zien of uw huidige opzet dicht bij of ver van WCAG 2.2-conformiteit zit. Daarna is de keuze: de bestaande speler aanpassen of vervangen door een die standaard compliant is. Onze toegankelijkheidsdocumentatie beschrijft de configuratie die we aanbevelen voor sites onder druk van de EAA.