Multimédia

Critère 4.1Chaque média temporel pré-enregistré a-t-il, si nécessaire, une transcription textuelle ou une audiodescription (hors cas particuliers) ?

Ce que ça vérifie — Vérifie qu'un média temporel pré-enregistré uniquement audio (podcast) dispose d'une transcription, et qu'une vidéo muette (sans piste audio) dispose d'une transcription ou d'une audiodescription. Sans cela, une personne sourde ou aveugle n'a aucun accès à l'information portée par le média.

Comment corriger — Fournissez une transcription textuelle sur la page (ou via un lien adjacent au média) restituant intégralement la parole et les sons signifiants pour l'audio ; pour une vidéo sans son, proposez une transcription ou une audiodescription. Placez la transcription dans un conteneur HTML lisible par tous, à proximité immédiate du lecteur.

<video src="tuto.mp4" controls></video>
<details>
  <summary>Transcription textuelle</summary>
  <p>[00:00] Bienvenue dans ce tutoriel…</p>
</details>

Critère 4.2Pour chaque média temporel pré-enregistré ayant une transcription textuelle ou une audiodescription synchronisée, celles-ci sont-elles pertinentes (hors cas particuliers) ?

Ce que ça vérifie — Vérifie que la transcription ou l'audiodescription détectée est réellement complète et fidèle : elle doit restituer tous les dialogues, les intervenants identifiés et les informations sonores ou visuelles pertinentes. Une transcription tronquée ou approximative prive l'utilisateur d'une partie de l'information.

Comment corriger — Relisez la transcription en la comparant au média : intégrez la parole mot pour mot, identifiez les locuteurs, et décrivez les sons signifiants (musique, rires, bruits porteurs de sens). Pour une audiodescription textuelle, ajoutez la description des éléments visuels essentiels à la compréhension.

Critère 4.3Chaque média temporel synchronisé pré-enregistré a-t-il, si nécessaire, des sous-titres synchronisés (hors cas particuliers) ?

Ce que ça vérifie — Vérifie qu'une vidéo comportant une piste audio synchronisée (paroles) est accompagnée de sous-titres synchronisés. Ces sous-titres permettent aux personnes sourdes ou malentendantes de suivre les dialogues et les sons signifiants en temps réel.

Comment corriger — Associez au lecteur une piste de sous-titres au format WebVTT via <track kind="captions">, en langue de la vidéo, incluant dialogues, locuteurs et sons pertinents. N'utilisez pas kind="subtitles", réservé à la traduction pour un public entendant.

<video controls>
  <source src="conference.mp4" type="video/mp4">
  <track kind="captions" src="conference-fr.vtt" srclang="fr" label="Français" default>
</video>

Critère 4.4Pour chaque média temporel synchronisé pré-enregistré ayant des sous-titres synchronisés, ces sous-titres sont-ils pertinents ?

Ce que ça vérifie — Vérifie que les sous-titres présents sont pertinents : synchronisés avec la bande son, fidèles aux dialogues et incluant les informations sonores nécessaires à la compréhension (locuteur, musique, bruitages signifiants). Des sous-titres décalés ou incomplets restent inexploitables.

Comment corriger — Contrôlez le calage temporel des repères VTT (cue) sur la parole, transcrivez fidèlement les dialogues sans les résumer abusivement, et signalez les sons hors champ entre crochets. Distinguez les locuteurs lorsque plusieurs personnes parlent.

WEBVTT

00:00:03.000 --> 00:00:06.500
- Marie : Le rapport est prêt.
[applaudissements]

Critère 4.5Chaque média temporel pré-enregistré a-t-il, si nécessaire, une audiodescription synchronisée (hors cas particuliers) ?

Ce que ça vérifie — Vérifie qu'une vidéo dont la compréhension repose sur des éléments visuels non restitués par la bande son (action muette, texte à l'écran, geste) dispose d'une audiodescription synchronisée. Sans elle, une personne aveugle ou malvoyante perd l'information portée uniquement par l'image.

Comment corriger — Ajoutez une audiodescription synchronisée : soit une piste audio dédiée décrivant les éléments visuels dans les silences, soit une version alternative de la vidéo audiodécrite, soit une piste <track kind="descriptions"> restituée par la synthèse vocale. Insérez les descriptions dans les blancs de la bande son originale.

<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="demo-fr.vtt" srclang="fr" label="Français">
  <track kind="descriptions" src="demo-ad.vtt" srclang="fr" label="Audiodescription">
</video>

Critère 4.6Pour chaque média temporel pré-enregistré ayant une audiodescription synchronisée, celle-ci est-elle pertinente ?

Ce que ça vérifie — Vérifie que l'audiodescription synchronisée est pertinente : elle décrit les informations visuelles essentielles (personnages, actions, décors signifiants, textes affichés) sans empiéter sur les dialogues. Une audiodescription lacunaire ou mal placée ne rend pas la vidéo compréhensible.

Comment corriger — Vérifiez que chaque élément visuel indispensable à la compréhension est décrit dans les silences de la bande son, de façon concise et neutre. Assurez-vous que les descriptions ne se superposent pas à la parole et respectent la chronologie de l'action.

Critère 4.7Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?

Ce que ça vérifie — Vérifie que chaque média temporel est clairement identifiable en tant que tel par tous les utilisateurs, y compris via les technologies d'assistance. Un lecteur sans nom explicite empêche l'utilisateur de savoir de quel contenu il s'agit et comment l'utiliser.

Comment corriger — Donnez au lecteur un nom accessible pertinent (attribut title sur <video>/<audio>, ou aria-label / aria-labelledby sur un lecteur personnalisé), et accompagnez le média d'un intitulé visible décrivant son contenu. Pour un lecteur custom, exposez un rôle et un nom cohérents.

<video src="webinaire.mp4" controls
       title="Webinaire : introduction au RGAA 4.1"
       aria-label="Webinaire : introduction au RGAA 4.1"></video>

Critère 4.8Chaque média non temporel a-t-il, si nécessaire, une alternative (hors cas particuliers) ?

Ce que ça vérifie — Vérifie qu'un média non temporel (contenu interactif ou animé sans dimension de durée fixe, type application riche, simulation, carte interactive) propose une alternative lorsque son contenu porte de l'information. Sans alternative, l'information reste inaccessible aux technologies d'assistance.

Comment corriger — Fournissez une alternative textuelle ou une version accessible équivalente à proximité du média, restituant l'information et les fonctionnalités qu'il apporte. Décrivez le contenu et proposez un accès aux mêmes données par un autre moyen (tableau, texte, page dédiée).

<div id="carte-interactive" aria-describedby="carte-alt">…</div>
<p id="carte-alt">Alternative : liste des 12 agences avec adresses et horaires.</p>

Critère 4.9Pour chaque média non temporel ayant une alternative, cette alternative est-elle pertinente ?

Ce que ça vérifie — Vérifie que l'alternative fournie pour un média non temporel est pertinente : elle doit restituer fidèlement l'ensemble de l'information et des fonctions du média d'origine. Une alternative partielle ou obsolète ne remplit pas son rôle.

Comment corriger — Comparez l'alternative au média source pour garantir qu'aucune information ni fonctionnalité essentielle n'est omise, et maintenez-la à jour lors des évolutions du contenu. Assurez-vous qu'elle permet d'atteindre le même objectif que le média.

Critère 4.10Chaque son déclenché automatiquement est-il contrôlable par l’utilisateur ?

Ce que ça vérifie — Vérifie que tout son déclenché automatiquement et durant plus de 3 secondes peut être arrêté ou son volume réglé indépendamment du volume système. Un son intempestif perturbe fortement les utilisateurs de lecteurs d'écran, dont la synthèse vocale devient inaudible.

Comment corriger — Évitez la lecture automatique ; si elle est indispensable, fournissez un contrôle accessible (bouton pause/stop ou réglage de volume) situé en début de page et actionnable au clavier. Sur un média HTML5, retirez l'attribut autoplay ou exposez les contrôles natifs.

<!-- À éviter -->
<audio src="fond.mp3" autoplay loop></audio>

<!-- Recommandé -->
<audio src="fond.mp3" controls></audio>

Critère 4.11La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ?

Ce que ça vérifie — Vérifie que la consultation d'un média temporel (lecture, pause, volume, plein écran) est pilotable au clavier et à tout dispositif de pointage. Un lecteur inaccessible au clavier bloque les personnes ne pouvant pas utiliser la souris.

Comment corriger — Privilégiez les contrôles natifs de <video>/<audio> (attribut controls), accessibles clavier par défaut ; pour un lecteur personnalisé, rendez chaque contrôle focalisable, actionnable par Entrée/Espace et doté d'un nom accessible. Vérifiez l'ordre de tabulation et la visibilité du focus.

<button type="button" aria-label="Lecture" onclick="video.play()">
  <svg aria-hidden="true">…</svg>
</button>

Critère 4.12La consultation de chaque média non temporel est-elle contrôlable par le clavier et tout dispositif de pointage ?

Ce que ça vérifie — Vérifie que la consultation d'un média non temporel (contenu interactif, animation pilotable) est utilisable au clavier et au pointage. Sans accès clavier, une partie des utilisateurs ne peut ni naviguer ni activer les fonctions du média.

Comment corriger — Rendez tous les éléments interactifs du média focalisables et activables au clavier (éléments natifs ou tabindex et gestion des touches), avec un focus visible et un ordre de tabulation logique. Assurez la double compatibilité clavier et pointage pour chaque action.

Critère 4.13Chaque média temporel et non temporel est-il compatible avec les technologies d’assistance (hors cas particuliers) ?

Ce que ça vérifie — Vérifie que le lecteur ou le média (temporel ou non) est compatible avec les technologies d'assistance : contrôles correctement nommés et exposés, états annoncés (lecture/pause), sous-titres et pistes accessibles. Un composant mal exposé rend le média inutilisable au lecteur d'écran.

Comment corriger — Appuyez-vous sur les éléments natifs HTML5 ou, pour un lecteur custom, respectez les modèles de conception ARIA : rôles, noms (aria-label), états (aria-pressed, aria-expanded) et gestion du focus. Testez avec un lecteur d'écran pour valider l'annonce des contrôles et des changements d'état.

<button type="button" aria-label="Pause" aria-pressed="true">…</button>