Les trésors cachés des lecteurs vidéo pour un multimédia plus accessible

Audrey Maniez, Access42

Touraine Tech #25 – 07/02/2025

Support de présentation

a42.fr/tnt25

Bonjour !

Access42

  • Coopérative (SCOP) et entreprise solidaire d’utilité sociale (ESUS), spécialisée en accessibilité numérique.
  • Accompagnement, conseil, audit et formations.
  • Ressources et outils sous licence libre.
  • access42.net

Accessibilité : quelles normes ?

Sous-titres

Sous-titres pour personnes sourdes et malentendantes (SME)

  • Utilité : retranscrire les paroles et autres informations sonores porteuses d’information
  • Sous-titres incrustés : open captions
  • Sous-titres activables : closed captions

Sous-titres de traduction

  • Utilité : traduire la vidéo dans une langue différente
  • Cible : personnes qui ne parlent pas la langue de la vidéo
  • En anglais : subtitles

Sous-titres vocalisés pour personnes aveugles

  • Utilité : entendre les sous-titres de traduction pendant la lecture d’une vidéo
  • En anglais : spoken subtitles, audio subtitles (AST)

Vous n’en aviez jamais entendu parler ?

C‘est parce que (presque) personne n’en fait !…

déploiement des sous-titres vocalisés en Europe

Source : Access Services Pan European Survey 2016 (PDF)

Pourtant, ces sous-titres sont obligatoires en Europe !

Norme EN 301 549 : 7.1.5 Spoken subtitles

« Lorsqu’une technologie de l’information et de la communication (TIC) affiche une vidéo avec un audio synchronisé, elle doit inclure un mode de fonctionnement permettant de fournir une sortie audio des sous-titres disponibles, sauf si le contenu des sous-titres affichés ne peut pas être déterminé de manière programmatique.» 

Une « sortie audio des sous-titres » ? 🤔

L’une des méthodes suivantes peut être mise en œuvre, au choix :

  • une piste sonore ;
  • une fonctionnalité du lecteur ;
  • la vocalisation des sous-titres par les technologies d’assistance, comme un lecteur d’écran (NVDA, JAWS, VoiceOver, Talkback) ;
  • une vidéo alternative.

cf. le critère 4.18 du RAWeb

Démos

Testons quelques lecteurs de choix :

Pourquoi ceux-là ?

⚠️ Démonstrations expérimentales

Code HTML pour insérer une vidéo

<!-- Intégration de la vidéo -->
<video>
  <source src="video.mp4" type="video/mp4">

  <track kind="captions" src="captions.vtt" srclang="en" lang="en" label="English">
  <track kind="subtitles" src="subtitles.vtt" srclang="fr" lang="fr" label="Français" default>

  <track kind="descriptions" src="descriptions.vtt" srclang="en" lang="en" label="Français">

</video>

<!-- Affichage des sous-titres dans un conteneur généré par le script -->
<div class="captions">[affichage des sous-titres]</div>

WebVTT

Format des sous-titres et des descriptions : WebVTT

WEBVTT
kind: subtitles
lang: fr

00:00:05.220 --> 00:00:07.500
Un bon design

00:00:07.500 --> 00:00:10.920
passe pratiquement inaperçu.

Vocalisation des sous-titres native ?

Aucune méthode disponible

Video.js ou Able Player n’offrent pas de méthode dédiée pour les sous-titres vocalisés.

Sous-titres vocalisés par le lecteur d’écran ?

Video.js

Démo


<div class="vjs-text-track-display" aria-live="polite">
	<div class="vjs-text-track-cue" lang="fr">
		[sous-titres]
	</div>
</div>
  • Surcharge appliquée uniquement aux sous-titres de traduction kind="subtitles"
  • Proposition similaire pour Able Player : démo

Les live regions ARIA

Informer, en temps réel, les personnes déficientes visuelles quand un contenu est mis à jour de manière dynamique, que ces mises à jour soient spontanées ou résultantes d’une action de leur part.

  • aria-live="[polite assertive off]" : attendra la fin d’une éventuelle restitution en cours ou interrompra toute restitution en cours (ou ne fera rien)
  • Autres propriétés : role="[alert status log]"

Limites des sous-titres vocalisés par lecteur d’écran ⚠️

  • Vitesse de lecture du lecteur d’écran
    • Coupure de la vocalisation en cours quand un nouveau sous-titre apparaît
    • Ou bien mise en attente des sous-titres et donc désynchronisation avec la vidéo
  • Fragilité des live regions ARIA
    • La vocalisation des sous-titres peut être perturbée par la vocalisation des notifications systèmes (alerte de batterie faible par exemple).

Sous-titres vocalisés par le navigateur ?

API Web Speech - Speech synthesis
ou Text-to-speech (TTS)

1

1

Source : Web Speech API speech synthesis demo, Chris Mills

Video.js

Démo

Middleware : videojs-speak-descriptions-track, par Owen Edwards.

<script src="videojs-speak-descriptions-track.js">
videojs.options.pauseVideoDuringDescription = false;
videojs.options.speakDescriptionsTrackType = "subtitles";
player.speakDescriptionsTrack();
  • pauseVideoDuringDescription : au choix, pause ou non.
  • Temps de vocalisation est supérieur à horodatage = pause de la vidéo (approximatif).
  • Rien de comparable n’existe pour Able Player.

Sous-titres vocalisés pré-enregistrés ?

Video.js

Démo

  • Fonctionnalité pour offrir plusieurs pistes audio
  • Pas de multipliste dans Able Player

Sous-titres : synthèse

  • Piste audio : meilleure expérience utilisateur, mais coûteux
  • Text-to-speech (TTS) : pratique, mais peu naturel
  • Lecteur d’écran : peu satisfaisant, fallback à une implémentation TTS

C’est la quantité, les moyens et la nature du projet qui vont permettre de trancher.

L’approche TTS permet d’industrialiser à moindres frais l’accès aux sous-titres de traduction pour les personnes qui en ont besoin.

Imaginons le lecteur multimédia idéal pour vocaliser des sous-titres

  • Forcer ou désactiver la vocalisation à l’activation d’une piste de sous-titres
  • Pouvoir régler le volume des sous-titres, indépendant des pistes
  • Text-to-speech (TTS) :
    • choix de la voix et de la tonalité,
    • mettre en pause la vidéo si les sous-titres sont plus longs à lire.

Audiodescription

Audiodescription pour les personnes aveugles ou malvoyantes

  • Décrire à l’oral l’information visuelle nécessaire à la compréhension (par exemple : décrire les textes incrustés)
  • Méthodes :
    • Intégrée : les descriptions font déjà partie de la piste sonore principale
    • Vidéo alternative
    • Piste sonore supplémentaire

Audiodescription avec vidéo ou bande-son alternative ?

Able Player : permutation de vidéos

Démo

<video>
	<source type="video/mp4" 
	src="_sources/colors-with-good-contrast.mp4" 
	data-desc-src="_sources/colors-with-good-contrast-ad.mp4">
</video>

Video.js : piste audio supplémentaire

Démo

  • Fonctionnalité pour fournir plusieurs pistes audio
  • Ou bien : faire un lien réciproque entre deux versions de vidéos

Limites des vidéos alternatives et des pistes sonores ⚠️

Vous pouvez les utiliser, mais :

  • Coût : c’est cher, d’autant plus que sa création intervient après la conception de la vidéo ;
  • Conformité : opter pour l’audiodescription étendue (AAA) si la piste initiale le permet.

Audiodescription vocalisée par le lecteur d’écran ?

Video.js

Démo


<track kind="descriptions" src="contrast_ad_desc-fr.vtt" srclang="fr" lang="fr" label="Français">

<div class="vjs-text-track-display" aria-live="assertive">
	[description écrite]
</div>
  • Automatique dans Video.js pour kind="descriptions"
  • Automatique dans Able Player si data-desc-reader="screenreader" : démo
  • Peu satisfaisant : superposition de la description vocalisée aux textes de la bande sonore.
  • Désynchronisation entre la lecture de la description et le défilement de la vidéo

Audiodescription vocalisée par le navigateur ?

Able Player

Démo

<track kind="descriptions" src="contrast_ad_desc-fr.vtt" srclang="fr" lang="fr" label="Français">
  • Gestion automatique dans Able Player pour kind="descriptions"
  • Configuration de la voix : voix, tonalité, vitesse, volume
  • Choisir d’afficher ou non la description
  • Choisir d’arrêter ou non la lecture de la vidéo lors d’une description
  • Utilisation du middleware pour Video.js : démo

Audiodescription : synthèse

  • Text-to-speech (TTS) : mise en pause de la vidéo pour y insérer les descriptions nécessaires sans désynchronisation
  • Réelle plus-value du TTS pour les descriptions : permet de se soustraire aux contraintes de la bande-son initiale

Là encore, c’est la quantité, les moyens et la nature du projet qui permettent de trancher sur l’approche à adopter.

Et les autres ?

Lecteur YouTube

  • Sous-titres : oui
  • Sous-titres vocalisés : non
  • Audiodescription : pas vraiment… Multi-language audio (MLA) encore limité à des comptes choisis.

Mais… il est possible de l’intégrer dans un lecteur Able Player !

Démo

Lecteur Vimeo

Exemple avec sous-titres : Web for Social Good - Dan Appelquist - W3C (Vimeo)

Pour conclure

  • Sous-titres vocalisés et audiodescription : c’est possible !
  • Bénéfices pour d’autres personnes handicapées (par exemple : difficultés de lecture)
  • Et n’oubliez pas de respecter les contrastes de couleurs.

Merci de votre attention !

Des questions ?

Crédits pour le matériel vidéo

Cette présentation est basée sur la vidéo Web Accessibility Initiative (WAI) : Colors With Good Contrast du W3C. Shadi Abou-Zahra, ed. Copyright © 2024 World Wide Web Consortium (W3C®).

Un grand merci !

  • Luce Carević pour l'enregistrement de la piste audio des sous-titres
  • Marie Guillaumet pour les encouragements, la relecture et les conseils
  • Olivier Motelet pour la mise en route du middleware Video.js

Ressources sur les sous-titres vocalisés

Ressources sur les live regions ARIA

Sur le blog d’Access42 :

Ressources sur les sous-titres

Ressources sur l’audiodescription

Pour compléter votre veille sur l’accessibilité numérique

  • Blog d’Access42 : actualités et articles de fond sur l’accessibilité.
    a42.fr/blog
  • Newsletter : tous les deux mois, un condensé d’accessibilité dans votre boîte mail.
    a42.fr/newsletter
  • Linkedin : veille au quotidien et articles exclusifs.
    a42.fr/linkedin
  • Formation au développement accessible : pour aller encore plus loin !
    a42.fr/formationdev

À bientôt !