WCAG 1.2.4 : Sous-titres (en direct)

Ce que signifie cette règle

\n

WCAG 1.2.4 (Sous-titres — En direct) exige que des sous-titres soient fournis pour tout contenu audio en direct dans des médias synchronisés. Les médias synchronisés sont définis comme du contenu audio ou vidéo synchronisé avec un autre format de présentation de l’information ou avec des composants interactifs basés sur le temps, tels qu’une webdiffusion, un flux en direct ou une diffusion en temps réel sur le web.

\n

En pratique, cela signifie que tout événement en direct publié sur un site web ou une application web qui inclut de l’audio — une conférence de presse diffusée sur un site d’actualités, une réunion générale d’entreprise, une audience gouvernementale, un cours en ligne en direct ou un flux de commentaires sportifs — doit afficher des sous-titres en temps réel qui reflètent fidèlement ce qui est dit au moment où cela se produit.

\n

Ce qui est considéré comme conforme : Un flux en direct satisfait à ce critère lorsque des sous-titres synchronisés et précis en temps réel sont visibles pour l’utilisateur pendant la lecture. Les sous-titres doivent représenter tous les dialogues et les informations audio non verbales pertinentes (telles que « [applaudissements] » ou « [sonnerie d’alarme] »). Les approches courantes incluent le CART (Communication Access Realtime Translation) fourni par un sous-titreur professionnel, les sous-titres de reconnaissance automatique de la parole (ASR) provenant d’un service de sous-titrage en direct qualifié, ou des intégrations tierces telles que celles proposées par les plateformes de diffusion.

\n

Ce qui est considéré comme non conforme : Un flux en direct ne satisfait pas à ce critère lorsqu’aucun sous-titre n’est disponible, lorsque les sous-titres ne sont pas synchronisés avec l’audio parlé, lorsque les sous-titres omettent des parties significatives du dialogue, ou lorsque la précision des sous-titres est si faible que la compréhension est gravement compromise. Fournir une transcription après coup ne répond pas à cette exigence — les sous-titres doivent être disponibles en direct, en temps réel.

\n

Exceptions officielles : WCAG définit une exception à cette règle : les médias qui sont eux-mêmes une alternative média au texte, et qui sont clairement étiquetés comme tels, en sont exemptés. Par exemple, si vous publiez une transcription textuelle détaillée d’une interview et que vous fournissez également une version audio en direct du même contenu, explicitement étiquetée comme une alternative audio au texte, les sous-titres peuvent ne pas être strictement requis. Cependant, cette exception est limitée et rarement applicable en pratique.

\n

Ce critère s’applique à tous les médias synchronisés publiés sur le web — que la vidéo ait été préproduite ou soit réellement en direct. La rediffusion d’un webinaire préenregistré diffusée comme si elle était en direct relève toujours de 1.2.3 ou 1.2.5, mais une véritable diffusion en temps réel relève clairement de 1.2.4.

\n\n

Pourquoi c’est important

\n

Environ 430 millions de personnes dans le monde présentent une perte auditive invalidante selon l’Organisation mondiale de la Santé, et ce nombre devrait dépasser 700 millions d’ici 2050. Pour les personnes sourdes et malentendantes, les sous-titres en temps réel ne sont pas un confort — ils sont le moyen principal, voire unique, d’accéder au contenu audio dans un contexte en direct. Sans sous-titres, ces personnes sont totalement exclues de la participation à tout événement médiatique en direct ou de la compréhension de celui-ci.

\n

Au-delà de la surdité et de la perte auditive, les sous-titres en direct bénéficient à un public beaucoup plus large. Les utilisateurs dans des environnements bruyants — aéroports, bureaux ouverts, transports publics — peuvent être dans l’incapacité d’utiliser l’audio. Les utilisateurs qui regardent dans des environnements calmes sans écouteurs, ou ceux qui ont coupé le son de leurs appareils, s’appuient sur les sous-titres pour suivre le contenu. Les locuteurs non natifs trouvent souvent les sous-titres indispensables à la compréhension, en particulier lorsque les intervenants utilisent un vocabulaire complexe, des accents ou du jargon technique. Les différences de traitement cognitif et linguistique peuvent également rendre les sous-titres essentiels pour une compréhension précise.

\n

Considérez un scénario concret : une municipalité en Turquie diffuse en direct une réunion du conseil municipal sur son site officiel. Un·e résident·e sourd·e souhaite suivre le débat sur les changements de zonage dans son quartier. Sans sous-titres en temps réel, cette personne est complètement exclue de la participation civique. Il en va de même pour un·e étudiant·e sourd·e assistant à un cours en ligne en direct sur le système de gestion de l’apprentissage d’une école privée, ou pour un·e client·e qui essaie de suivre un webinaire en direct d’une banque présentant un nouveau produit.

\n

D’un point de vue pratique, l’infrastructure de sous-titrage en direct produit également une transcription qui peut être indexée par les moteurs de recherche, améliorant la découvrabilité du contenu vidéo. Les organisations qui investissent dans le sous-titrage en direct constatent souvent que la transcription devient une ressource précieuse pour la documentation après l’événement, les résumés et la recherche dans les archives.

\n\n

Règles Axe-core associées

\n

WCAG 1.2.4 nécessite des tests manuels. Aucune règle axe-core automatisée ne peut détecter de manière fiable la présence ou la qualité des sous-titres en direct, et il est important de comprendre cette distinction lors de la planification de votre stratégie d’audit d’accessibilité.

\n

\n
• Tests manuels requis — présence de sous-titres en direct : Des outils automatisés comme axe-core peuvent analyser le DOM pour détecter la présence d’un élément <track> avec kind='captions' sur un élément <video>, mais les flux en direct ne sont presque jamais diffusés via un simple élément HTML <video> avec un <track>. Ils utilisent généralement des formats à débit adaptatif (HLS, DASH) diffusés via des lecteurs basés sur JavaScript tels que Video.js, JW Player ou des lecteurs natifs de plateforme. Ces lecteurs rendent les sous-titres de manière dynamique, d’une façon qu’axe-core ne peut pas introspecter. Un outil ne peut pas regarder un flux en direct en temps réel, évaluer la précision des sous-titres, mesurer le délai de synchronisation ou déterminer si une superposition de sous-titres reflète réellement le contenu parlé ou s’il s’agit d’un espace réservé statique.
\n
• Tests manuels requis — qualité et précision des sous-titres : Même si un outil automatisé pouvait détecter l’existence d’un flux de sous-titres, il n’aurait aucun moyen d’évaluer si les sous-titres sont précis, complets ou suffisamment synchronisés. Des sous-titres produits par CART et des sous-titres automatiques de mauvaise qualité peuvent tous deux apparaître comme « sous-titres présents » pour un outil, mais un seul d’entre eux satisfait à WCAG 1.2.4. Un examen humain pendant un événement en direct est le seul moyen fiable de vérifier la conformité.
\n
• Tests manuels requis — accessibilité des sous-titres dans le lecteur : Les outils automatisés ne peuvent généralement pas déterminer si les commandes de sous-titres dans un lecteur multimédia personnalisé sont accessibles au clavier, si l’affichage des sous-titres peut être redimensionné ou personnalisé par l’utilisateur, ou si le style des sous-titres répond aux besoins des utilisateurs. Ces aspects nécessitent des tests pratiques avec une navigation réelle au clavier et l’utilisation d’un lecteur d’écran.
\n

\n\n

Comment tester

\n

\n
1. Identifier tous les médias en direct sur la page : Passez en revue la page pour repérer tout flux vidéo ou audio en direct. Recherchez des lecteurs intégrés, des iframes ou des composants multimédias chargés dynamiquement. Notez si le contenu est réellement en direct (diffusion en temps réel) ou préenregistré. Seul le contenu audio véritablement en direct dans des médias synchronisés relève de 1.2.4.
\n
2. Exécuter une analyse automatisée avec axe DevTools ou Lighthouse : Ouvrez axe DevTools dans Chrome DevTools et lancez une analyse de page complète. Bien qu’axe ne puisse pas valider les sous-titres en direct, il peut signaler des problèmes connexes tels que l’absence de aria-label sur les commandes du lecteur multimédia, des boutons lecture/pause inaccessibles ou une gestion du focus manquante. Notez les problèmes signalés comme éléments de preuve à l’appui, mais gardez à l’esprit qu’un rapport axe sans erreur ne confirme pas la conformité à 1.2.4.
\n
3. Vérifier manuellement la disponibilité des sous-titres pendant un événement en direct : Accédez au flux en direct pendant une diffusion active. Vérifiez si des sous-titres sont affichés. Si le lecteur dispose d’un bouton de sous-titres (bouton CC), activez-le et confirmez que les sous-titres apparaissent et se mettent à jour en quasi temps réel au fur et à mesure que l’intervenant parle. Confirmez que le délai des sous-titres est acceptable — généralement de quelques secondes au maximum pour le CART, ou légèrement plus pour l’ASR.
\n
4. Évaluer la précision des sous-titres : Écoutez l’audio tout en lisant les sous-titres. Vérifiez s’il y a des mots manquants, des erreurs systématiques ou des omissions significatives. Les sous-titres n’ont pas besoin d’être mot à mot, mais ils doivent transmettre l’intégralité du sens du contenu parlé. Notez l’identification des intervenants si plusieurs personnes parlent — les sous-titres doivent indiquer qui parle lorsque ce n’est pas évident.
\n
5. Tester avec NVDA + Firefox : Accédez au lecteur multimédia à l’aide de la touche Tab. Vérifiez que toutes les commandes du lecteur, y compris le bouton de sous-titres, sont accessibles et utilisables au clavier. Confirmez que NVDA annonce l’état du bouton de sous-titres (activé/désactivé). Activez les sous-titres et vérifiez que le texte des sous-titres apparaît dans un élément du DOM que NVDA peut lire si l’utilisateur se déplace par tabulation vers ou autour du lecteur.
\n
6. Tester avec VoiceOver + Safari (macOS ou iOS) : Utilisez les gestes ou commandes clavier de VoiceOver pour naviguer dans le lecteur. Vérifiez que le bouton de sous-titres est annoncé et utilisable. Confirmez que les changements de texte des sous-titres sont correctement exposés dans la région accessible du lecteur.
\n
7. Tester avec JAWS + Chrome : Naviguez jusqu’aux commandes du lecteur à l’aide de Tab. Vérifiez que JAWS lit toutes les étiquettes des commandes. Confirmez que le bouton de sous-titres est identifié comme un bouton avec une étiquette et un état appropriés. Activez les sous-titres et vérifiez que l’affichage des sous-titres se met à jour comme prévu.
\n
8. Vérifier la personnalisation de l’affichage des sous-titres : Vérifiez si le lecteur permet aux utilisateurs de redimensionner le texte des sous-titres, de changer les couleurs ou d’ajuster le contraste. Bien que cela ne soit pas strictement requis par 1.2.4, il s’agit d’un point d’évaluation de bonnes pratiques et pertinent pour les critères WCAG 1.4.
\n

\n\n

Comment corriger

\n

Flux en direct sans piste de sous-titres — Incorrect

\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

Flux en direct avec piste de sous-titres CART intégrée — Correct

\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

Flux en direct intégré depuis une plateforme avec les sous-titres désactivés dans l’intégration — Incorrect

\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

Flux en direct intégré depuis une plateforme avec les sous-titres activés — Correct

\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

Lecteur personnalisé avec un bouton de sous-titres non accessible au clavier — Incorrect

\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

Lecteur personnalisé avec un bouton de sous-titres accessible — Correct

\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

Erreurs courantes

\n

\n
• Fournir une transcription après l’événement au lieu de sous-titres en temps réel : Publier une transcription textuelle d’un événement en direct après sa conclusion ne satisfait pas à 1.2.4. Les sous-titres doivent être disponibles en même temps que l’audio en direct, permettant aux personnes sourdes de suivre le contenu en temps réel aux côtés des personnes entendantes voyantes.
\n\n

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