3 conseils pour l'accessibilité audio et vidéo

3 Tips for Audio and Video Accessibility

Imaginez que vous chargez la dernière bande-annonce du film Marvel sur YouTube (si c'est votre confiture) ou votre comédie romantique préférée sur Netflix pour vous rendre compte, "hé, où est le son ?" Qu'en est-il lorsque vous êtes dans un bus ou un train bruyant et que vous avez besoin de regarder une conférence motivante de votre designer ou développeur préféré, "mais bon, il n'y a pas de sous-titres ?"

Aussi frustrant que cela puisse paraître, ce scénario exact se produit souvent pour les personnes sourdes ou malentendantes qui souhaitent profiter de la vidéo en ligne.

L'hébergement de contenu vidéo ou audio sans sous-titres ni transcription est un obstacle à l'accessibilité

Afin d'éviter ces obstacles à l'accessibilité, nous devons nous assurer que les sous-titres codés, les descriptions vidéo ou les transcriptions audio sont mis à disposition avant de lancer notre contenu pour une consommation publique.

1. Inclure des sous-titres

L'inclusion de sous-titres codés est indispensable pour le contenu vidéo avec un mot parlé. La façon dont vous accomplissez cette tâche dépend de votre lecteur vidéo ou du service de votre choix.

Vidéo HTML

Par exemple, vous devez suivre ces étapes lors de l'ajout de sous-titres lors de l'utilisation de l'élément video HTML :

  1. Créez ou générez un fichier WebVTT ( .vtt ). Ce fichier contiendra le texte du sous-titre ainsi que le moment et la durée de chaque sortie de sous-titre.
  2. ​Ajoutez le fichier WebVTT en tant qu'attribut src à un élément de track dans la video . Assurez-vous également de définir les attributs label , kind et srclang pour le contexte et la clarification.
<video controls> <source src="video.mp4" type="video/mp4" /> <track label="English" kind="subtitles" srclang="en" src="captions/en.vtt" default /> <track label="Français" kind="subtitles" srclang="fr" src="captions/fr.vtt" /> </video>

Autres services

De nombreux autres services vidéo populaires incluent la possibilité d'ajouter vos propres sous-titres. Certains proposent même des sous-titres automatiques que leurs algorithmes ont déterminés comme étant précis. Cependant, il est recommandé d'ajouter le vôtre, en particulier lorsqu'une terminologie inhabituelle ou technique est incluse.

Voici comment inclure des sous-titres pour les services vidéo :

Ne pas inclure les sous-titres, c'est comme produire une vidéo sans piste audio

Critères de réussite WCAG

Cela revient à 1.2.2 Sous-titres (préenregistrés) qui stipule :

"Les sous-titres sont fournis pour tout le contenu audio préenregistré dans les médias synchronisés, sauf lorsque le média est une alternative média pour le texte et est clairement étiqueté comme tel."

2. Fournissez des descriptions audio

Les descriptions audio sont importantes pour partager ce qui se passe entre les dialogues parlés. Les informations partagées dans la description peuvent inclure :

  • Un changement de décor
  • Un personnage effectuant une action
  • Brèves descriptions de l'émotion silencieuse

Lors de la création d'une vidéo pour le Web, il est obligatoire de fournir une description audio. ( 1.2.5 Audiodescription ). Afin de répondre à cette exigence, envisagez de créer une deuxième piste audio disponible . Si votre lecteur vidéo ne prend pas en charge plusieurs pistes audio, vous devrez peut-être fournir une vidéo distincte. Assurez-vous de lier une vidéo à l'autre pour vous assurer que les gens connaissent la version alternative.

Par exemple, comparez l'audio de la vidéo Présentation du contrôle vocal sur Mac et iOS d'Apple avec son alternative descriptive audio, Présentation du contrôle vocal sur Mac et iOS (avec descriptions audio) . Remarquez les informations supplémentaires décrites entre les personnes qui parlent. Il peut être utile de considérer les descriptions audio comme du texte alt pour des scènes spécifiques d'une vidéo. Utilisez suffisamment de mots pour peindre l'image mentale sans être envahissant avec trop de données.

Critères de réussite WCAG

Cela revient à la description audio 1.2.5 (préenregistrée) qui indique :

"Une description audio est fournie pour tout le contenu vidéo préenregistré dans les médias synchronisés."

3. Inclure des transcriptions pour le contenu vidéo et audio

Les transcriptions sont une version en texte brut de la partie audio d'un contenu vidéo ou audio. Proposer cette option présente de multiples avantages, mis à part le fait évident que les personnes sourdes ou malentendantes peuvent désormais être incluses dans la conversation :

  • Les moteurs de recherche pourront explorer le texte et l'ajouter à leurs index pour rendre votre contenu consultable
  • Les personnes se trouvant dans des environnements bruyants tels qu'un terminal de bus ou un métro peuvent lire le contenu plutôt que de s'efforcer de l'entendre
  • Les éléments de contenu peuvent être plus facilement partagés sur les réseaux sociaux, réduisant ainsi l'écart entre les lecteurs qui trouvent et consomment votre contenu

Créer des transcriptions ou les faire générer pour vous par un service, tel que Rev.com , aura un impact positif à long terme. La question est maintenant : « Où dois-je placer les transcriptions ? »

Placement du contenu de la transcription

Lorsque vous incluez des transcriptions pour le contenu audio, cela se trouve généralement près des commandes audio, généralement directement en dessous. L'avantage d'inclure le texte à proximité est de permettre au contenu d'être facilement détectable ; les gens n'auront pas besoin de rechercher un lien pour lire la version alternative du texte.

Par exemple, consultez le podcast Responsive Web Design . Chaque page de destination comporte un lecteur audio natif ainsi que la version en texte brut du contenu du podcast directement en dessous. Avec cette configuration, les utilisateurs ont le choix d'écouter ou de lire le contenu du podcast.

Une autre option pour le placement de la transcription est que si l'espace sur l'écran est restreint ou si vous préférez "masquer" temporairement le contenu jusqu'à ce que l'utilisateur le demande, implémentez le contenu de la transcription dans un composant "afficher/masquer". Envisagez d'utiliser l' élément de divulgation des details HTML pour ce composant. Avec cela en place, les concepteurs peuvent "masquer" le contenu de la transcription et les utilisateurs finaux peuvent activer le contrôle de divulgation et lire le contenu lorsqu'ils le souhaitent.

 <details> <summary> <h2>Transcript</h2> </summary> <p>Transcript content...</p> </details>

Ressources:

Retour au blog