Chaque vidéo ou fichier audio publié sur le site est-il clairement nommé pour que l'on sache ce qu'il contient avant de le lancer ?
Critère officiel 4.7 — Chaque média temporel est-il clairement identifiable (hors cas particuliers) ?
Pourquoi c'est important
Une personne utilisant un logiciel de lecture navigue entre les éléments de la page et entend leur nom annoncé. Si une vidéo est nommée « video_final_v2 » ou simplement « Lecteur vidéo », elle ne sait pas ce qu'elle va trouver et ne peut pas choisir de l'écouter ou de passer.
Exemples concrets
Ce qui est conforme
Chaque vidéo de conseil municipal est titrée précisément : « Séance du conseil municipal du 14 octobre 2024 — ordre du jour : budget primitif et approbation du PLU ». Le logiciel de lecture l'annonce clairement.
Ce qui pose problème
La page des archives vidéo liste trois lecteurs intitulés « Vidéo 1 », « Vidéo 2 » et « Vidéo 3 ». Un utilisateur de logiciel de lecture ne peut pas savoir quelle séance correspond à laquelle sans lancer chaque vidéo une par une.
Comment agir
Dans WordPress, remplissez systématiquement le champ Titre de chaque vidéo ou fichier audio ajouté à la médiathèque. Pour les vidéos YouTube intégrées, le titre de la vidéo sur YouTube sert d'identifiant — vérifiez qu'il est explicite avant de partager le lien.
Règles clés
- aria-label ou aria-labelledby sur <video> ou <iframe> pour associer un titre descriptif.
- Un titre H2 adjacent peut être lié via aria-labelledby.
- Le title sur un iframe YouTube remplit cette fonction pour les vidéos embarquées.
Erreurs fréquentes
- Lecteur vidéo sans aria-label ni aria-labelledby
- iframe YouTube sans attribut title
- Plusieurs lecteurs sur la même page avec des titres identiques
Exemples de code
lecteur sans identification
✗ Non conforme<video controls src="presentation.mp4"></video>
<p>Notre présentation de l'entreprise</p>Le <p> adjacent n'est pas associé programmatiquement. Le lecteur d'écran annonce 'vidéo' sans titre.
lecteur avec titre associé
✓ Conforme<h2 id="titre-video">Présentation de l'entreprise</h2>
<video controls src="presentation.mp4"
aria-labelledby="titre-video">
<track kind="subtitles" src="st.vtt"
srclang="fr" label="Français" default>
</video>aria-labelledby lie programmatiquement la vidéo à son titre H2. Annoncé : 'Présentation de l'entreprise, vidéo'.
Référence WCAG : 1.1.1