WCAG-succescriteria · Level AA

WCAG 1.2.4: Ondertiteling (live)

WCAG 1.2.4 vereist dat alle live audiocontent in gesynchroniseerde media—zoals webinars, livestreams en uitzendingen—wordt voorzien van real-time ondertiteling. Dit zorgt ervoor dat dove en slechthorende gebruikers toegang hebben tot gesproken content op het moment dat deze plaatsvindt, in real time.

  • Level AA

Wat Deze Regel Betekent

\n

WCAG 1.2.4 (Ondertiteling — Live) vereist dat er ondertiteling wordt aangeboden voor alle live audiocontent in gesynchroniseerde media. Gesynchroniseerde media wordt gedefinieerd als audio- of videocontent die is gesynchroniseerd met een ander formaat voor het presenteren van informatie of met tijdgebaseerde interactieve componenten, zoals een webcast, livestream of realtime uitzending op het web.

\n

In praktische termen betekent dit dat elk live evenement dat op een website of webapplicatie wordt gepubliceerd en audio bevat — een persconferentie die wordt gestreamd op een nieuwssite, een bedrijfsbrede uitzending, een hoorzitting van de overheid, een live online les of een sportcommentaarstream — realtime ondertiteling moet tonen die nauwkeurig weergeeft wat er wordt gezegd op het moment dat het gebeurt.

\n

Wat telt als een voldoende resultaat: Een livestream voldoet aan dit criterium wanneer gesynchroniseerde, nauwkeurige realtime ondertiteling zichtbaar is voor de gebruiker tijdens het afspelen. De ondertiteling moet alle dialogen en relevante niet-spraakgeluiden weergeven (zoals "[applause]" of "[alarm sounds]"). Veelvoorkomende benaderingen zijn CART (Communication Access Realtime Translation) geleverd door een professionele ondertitelaar, automatische spraakherkenningsondertiteling (ASR) van een gekwalificeerde live ondertitelingsdienst, of integraties van derden zoals die worden aangeboden door streamingplatforms.

\n

Wat telt als een onvoldoende resultaat: Een livestream voldoet niet aan dit criterium wanneer er geen ondertiteling beschikbaar is, wanneer de ondertiteling niet is gesynchroniseerd met de gesproken audio, wanneer de ondertiteling belangrijke delen van de dialoog weglaat, of wanneer de nauwkeurigheid van de ondertiteling zo slecht is dat het begrip ernstig wordt belemmerd. Het achteraf aanbieden van een transcript voldoet niet aan deze eis — ondertiteling moet live, in realtime beschikbaar zijn.

\n

Officiële uitzonderingen: WCAG definieert één uitzondering op deze regel: media die zelf een media-alternatief voor tekst zijn, en die duidelijk als zodanig zijn gelabeld, zijn uitgezonderd. Als je bijvoorbeeld een gedetailleerd teksttranscript van een interview publiceert en vervolgens ook een live audioversie van dezelfde content aanbiedt die expliciet is gelabeld als een audio-alternatief voor de tekst, is ondertiteling mogelijk niet strikt vereist. Deze uitzondering is echter beperkt en in de praktijk zelden van toepassing.

\n

Het criterium is van toepassing op alle gesynchroniseerde media die op het web worden gepubliceerd — ongeacht of de video vooraf is geproduceerd of echt live is. Een vooraf opgenomen webinarreplay die wordt gestreamd alsof deze live is, valt nog steeds onder 1.2.3 of 1.2.5, maar een echte realtime uitzending valt volledig onder 1.2.4.

\n\n

Waarom Het Belangrijk Is

\n

Ongeveer 430 miljoen mensen wereldwijd hebben een gehoorverlies dat tot een beperking leidt, volgens de Wereldgezondheidsorganisatie, en dat aantal zal naar verwachting stijgen tot meer dan 700 miljoen in 2050. Voor dove en slechthorende gebruikers zijn realtime ondertitels geen gemak — het is het primaire of enige middel om toegang te krijgen tot audiocontent in een live context. Zonder ondertiteling worden deze gebruikers volledig uitgesloten van deelname aan of begrip van elk live media-evenement.

\n

Naast doofheid en gehoorverlies komen live ondertitels een veel breder publiek ten goede. Gebruikers in lawaaiige omgevingen — luchthavens, kantoortuinen, openbaar vervoer — kunnen mogelijk geen audio gebruiken. Gebruikers die in stille omgevingen zonder koptelefoon kijken, of gebruikers die hun apparaten hebben gedempt, zijn afhankelijk van ondertiteling om te kunnen volgen. Niet-moedertaalsprekers vinden ondertiteling vaak onmisbaar voor begrip, vooral wanneer sprekers complexe woordenschat, accenten of vakjargon gebruiken. Cognitieve en taalverwerkingsverschillen kunnen ondertiteling ook essentieel maken voor een nauwkeurige begrip.

\n

Denk aan een concreet scenario: een gemeente in Turkije streamt een live gemeenteraadsvergadering op haar officiële website. Een inwoner die doof is, wil het debat over bestemmingsplanwijzigingen in zijn of haar buurt volgen. Zonder realtime ondertiteling wordt die inwoner volledig uitgesloten van burgerparticipatie. Hetzelfde geldt voor een dove student die een live online les volgt op het leerplatform van een particuliere school, of een klant die een live productaankondigingswebinar van een bank probeert te volgen.

\n

Vanuit praktisch oogpunt levert infrastructuur voor live ondertiteling ook een transcript op dat door zoekmachines kan worden geïndexeerd, waardoor de vindbaarheid van videocontent verbetert. Organisaties die investeren in live ondertiteling merken vaak dat het transcript een waardevolle bron wordt voor documentatie na het evenement, samenvattingen en archiefzoekopdrachten.

\n\n

Gerelateerde Axe-core-regels

\n

WCAG 1.2.4 vereist handmatige tests. Geen enkele geautomatiseerde axe-core-regel kan op betrouwbare wijze de aanwezigheid of kwaliteit van live ondertiteling detecteren, en dit is een belangrijk onderscheid om te begrijpen bij het plannen van je toegankelijkheidsauditstrategie.

\n
    \n
  • Handmatige test vereist — aanwezigheid van live ondertiteling: Geautomatiseerde tools zoals axe-core kunnen de DOM scannen op de aanwezigheid van een <track>-element met kind='captions' op een <video>-element, maar livestreams worden bijna nooit geleverd via een eenvoudig HTML-<video>-element met een <track>. Ze gebruiken doorgaans adaptieve bitrateformaten (HLS, DASH) die worden geleverd via op JavaScript gebaseerde players zoals Video.js, JW Player of native platformplayers. Deze players renderen ondertiteling dynamisch op manieren die axe-core niet kan inspecteren. Een tool kan geen livestream in realtime bekijken, de nauwkeurigheid van de ondertiteling beoordelen, de synchronisatievertraging meten of bepalen of een ondertitelingsoverlay daadwerkelijk de gesproken content weergeeft of een statische placeholder is.
  • \n
  • Handmatige test vereist — kwaliteit en nauwkeurigheid van ondertiteling: Zelfs als een geautomatiseerde tool zou kunnen detecteren dat er een ondertitelingsfeed bestaat, heeft deze geen manier om te beoordelen of de ondertiteling nauwkeurig, volledig of in voldoende mate gesynchroniseerd is. Door CART geproduceerde ondertiteling en ondertiteling van slechte kwaliteit die automatisch is gegenereerd, kunnen voor een tool allebei verschijnen als "ondertiteling aanwezig", maar slechts één daarvan voldoet aan WCAG 1.2.4. Menselijke beoordeling tijdens een live evenement is de enige betrouwbare manier om naleving te verifiëren.
  • \n
  • Handmatige test vereist — toegankelijkheid van ondertiteling binnen de player: Geautomatiseerde tools kunnen over het algemeen niet bepalen of ondertitelingsbedieningselementen binnen een aangepaste mediaplayer met het toetsenbord toegankelijk zijn, of de ondertiteling door de gebruiker kan worden vergroot of aangepast, of dat de opmaak van de ondertiteling voldoet aan de behoeften van gebruikers. Deze aspecten vereisen praktische tests met daadwerkelijke toetsenbordnavigatie en het gebruik van schermlezers.
  • \n
\n\n

Hoe te Testen

\n
    \n
  1. Identificeer alle live media op de pagina: Controleer de pagina op live video- of audiostreams. Controleer op ingesloten players, iframes of dynamisch geladen mediacomponenten. Noteer of de content echt live is (realtime uitzending) of vooraf opgenomen. Alleen echt live audiocontent in gesynchroniseerde media valt onder 1.2.4.
  2. \n
  3. Voer een geautomatiseerde scan uit met axe DevTools of Lighthouse: Open axe DevTools in Chrome DevTools en voer een scan van de volledige pagina uit. Hoewel axe live ondertiteling niet kan valideren, kan het gerelateerde problemen signaleren, zoals ontbrekende aria-label op mediaplayerbedieningselementen, ontoegankelijke afspelen-/pauzeknoppen of ontbrekend focusbeheer. Noteer alle gesignaleerde problemen als ondersteunend bewijs, maar begrijp dat een schoon axe-rapport geen bevestiging is van naleving van 1.2.4.
  4. \n
  5. Controleer handmatig de beschikbaarheid van ondertiteling tijdens een live evenement: Open de livestream tijdens een actieve uitzending. Controleer of er ondertiteling wordt weergegeven. Als de player een ondertitelingsschakelaar (CC-knop) heeft, activeer deze dan en controleer of de ondertiteling verschijnt en bijna realtime wordt bijgewerkt terwijl de spreker praat. Controleer of de vertraging van de ondertiteling acceptabel is — doorgaans niet meer dan enkele seconden voor CART, of iets meer voor ASR.
  6. \n
  7. Beoordeel de nauwkeurigheid van de ondertiteling: Luister naar de audio terwijl je de ondertiteling leest. Let op gemiste woorden, systematische fouten of belangrijke weglatingen. Ondertiteling hoeft niet woordelijk te zijn, maar moet de volledige betekenis van de gesproken content overbrengen. Let op sprekeridentificatie als er meerdere sprekers zijn — ondertiteling moet aangeven wie er spreekt wanneer dat niet duidelijk is.
  8. \n
  9. Test met NVDA + Firefox: Navigeer met de Tab-toets naar de mediaplayer. Controleer of alle playerbedieningselementen, inclusief de ondertitelingsschakelaar, bereikbaar en bedienbaar zijn met het toetsenbord. Controleer of NVDA de status van de ondertitelingsknop (aan/uit) aankondigt. Activeer ondertiteling en controleer of ondertiteltekst verschijnt in een DOM-element dat NVDA kan lezen als de gebruiker naar of rond de player tabt.
  10. \n
  11. Test met VoiceOver + Safari (macOS of iOS): Gebruik VoiceOver-gebaren of toetsenbordcommando’s om door de player te navigeren. Controleer of de ondertitelingsschakelaar wordt aangekondigd en bedienbaar is. Controleer of wijzigingen in de ondertiteltekst op de juiste manier worden weergegeven binnen de toegankelijke regio van de player.
  12. \n
  13. Test met JAWS + Chrome: Navigeer met Tab naar de playerbedieningselementen. Controleer of JAWS alle controlabels voorleest. Controleer of de ondertitelingsschakelaar wordt geïdentificeerd als een knop met een passend label en status. Activeer ondertiteling en controleer of de ondertitelweergave zoals verwacht wordt bijgewerkt.
  14. \n
  15. Controleer de aanpasbaarheid van de ondertitelweergave: Controleer of de player gebruikers in staat stelt de ondertiteltekst te vergroten, kleuren te wijzigen of het contrast aan te passen. Hoewel dit niet strikt vereist is door 1.2.4, is dit een best practice en relevant voor WCAG 1.4-criteria.
  16. \n
\n\n

Hoe te Herstellen

\n

Livestream zonder ondertitelingsspoor — Onjuist

\n
<!-- A live HLS stream embedded with no caption configuration -->\n<video id='live-player' controls autoplay>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <!-- No <track> element and no caption configuration in the player -->\n</video>
\n

Livestream met geïntegreerd CART-ondertitelingsspoor — Juiste

\n
<!-- Live stream using Video.js with a live WebVTT caption track fed by a CART service.\n     The src for the track points to a live caption endpoint that updates in real time. -->\n<video\n  id='live-player'\n  class='video-js vjs-default-skin'\n  controls\n  autoplay\n  aria-label='Live conference stream with real-time captions'>\n  <source src='https://stream.example.com/live/event.m3u8' type='application/x-mpegURL'>\n  <track\n    kind='captions'\n    src='https://captions.example.com/live/event.vtt'\n    srclang='tr'\n    label='Turkish captions'\n    default>\n</video>\n<script>\n  var player = videojs('live-player');\n  // Enable captions by default for accessibility\n  player.ready(function() {\n    player.textTracks()[0].mode = 'showing';\n  });\n</script>
\n

Ingesloten livestream van een platform met ondertiteling uitgeschakeld in de embed — Onjuist

\n
<!-- YouTube live embed with closed captions explicitly disabled via cc_load_policy=0.\n     This removes the user's ability to enable captions, causing a 1.2.4 failure. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=0'\n  title='Company all-hands live stream'\n  allowfullscreen>\n</iframe>
\n

Ingesloten livestream van een platform met ondertiteling ingeschakeld — Juiste

\n
<!-- YouTube live embed with closed captions enabled by default (cc_load_policy=1).\n     The platform's native caption infrastructure is used, which supports live auto-captions\n     and human-reviewed CART when configured in the YouTube Studio settings.\n     The host page also provides a direct link to the captioned stream for users\n     who cannot interact with the iframe. -->\n<iframe\n  src='https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID&cc_load_policy=1'\n  title='Company all-hands live stream with captions enabled'\n  allowfullscreen>\n</iframe>\n<p>\n  <a href='https://www.youtube.com/watch?v=LIVE_VIDEO_ID'>\n    Watch with captions directly on YouTube\n  </a>\n</p>
\n

Aangepaste player met een ondertitelingsschakelaar die niet met het toetsenbord toegankelijk is — Onjuist

\n
<!-- Caption toggle implemented as a non-interactive <div>.\n     Keyboard users and screen reader users cannot activate this control. -->\n<div class='player-controls'>\n  <div class='cc-button' onclick='toggleCaptions()'>CC</div>\n</div>
\n

Aangepaste player met een toegankelijke ondertitelingsschakelaar — Juiste

\n
<!-- Caption toggle implemented as a <button> with an explicit label and\n     ARIA pressed state so keyboard and screen reader users can discover\n     and operate it. The state updates dynamically when captions are toggled. -->\n<div class='player-controls'>\n  <button\n    class='cc-button'\n    id='captions-toggle'\n    aria-pressed='false'\n    aria-label='Toggle captions'\n    onclick='toggleCaptions(this)'>\n    CC\n  </button>\n</div>\n<script>\n  function toggleCaptions(btn) {\n    var isActive = btn.getAttribute('aria-pressed') === 'true';\n    btn.setAttribute('aria-pressed', String(!isActive));\n    // logic to show/hide the caption track\n  }\n</script>
\n\n

Veelvoorkomende Fouten

\n
    \n
  • Een transcript na het evenement aanbieden in plaats van realtime ondertiteling: Het publiceren van een teksttranscript van een live evenement nadat het is afgelopen, voldoet niet aan 1.2.4. Ondertiteling moet gelijktijdig met de live audio beschikbaar zijn, zodat dove gebruikers de content in realtime kunnen volgen, samen met ziende horende gebruikers.
  • \n\n

    (Content truncated due to token limit — please retry this article.)