Comment rendre mes vidéos accessibles ?

Présentation initiale réalisée dans le cadre du cycle de conférence Paris Web 2008 et disponible à l'adresse www.ideance.net/accessibilite-videos/.

Auteur
- Sébastien Delorme (sebastien@ideance.net).
Dernière mise à jour
- Samedi 6 décembre 2008 : publication de la recommandation SMIL 3.0.
- Apportez vos commentaires sur le blog www.tentatives-accessibles.eu.
Aide à l'utilisation
- Présentation au format HTML propulsée par HTML Slidy.
- La touche F11 permet d'afficher la présentation en plein écran.
- La touche Espace ou le clic gauche de la souris permettent de passer à l'écran suivant.
- Les touches <- et -> permettent la navigation dans les différents écrans.
- La touche C affiche le menu.
- La touche A affiche l'intégralité des écrans sur une seule page.

Présentation

Chargé de mission accessibilité chez Atalan :
- Réalisation d'audits d'accessibilité du Web ;
- Assistance technique, assistance à maîtrise d'ouvrage et assistance à maîtrise d'oeuvre pour la prise en compte de l'accessibilité dans les projets internet ;
- Conception et animation de formations à l'accessibilité du Web ;
- Clients : Alcatel-Lucent, AREVA, Capgemini, Carrefour, Lafarge, LVMH, SFR, ...

Rédacteur et co-créateur du blog Tentatives Accessibles.
Expert AccessiWeb en évaluation et membre du groupe de travail AccessiWeb.

Première mise en situation

Mise en situation, extrait vidéo d'une conférence de Jean-Louis Carvès, Paris Web 2007 (archives vidéos Paris Web 2007). Ouvrez grand vos oreilles.

Avez-vous compris toutes les informations données à l'oral ?

Problèmes d'accès au son

Problèmes d'accès au son, dans quels cas ?
- Internautes sourds ou malentendants
- Vidéo en langue étrangère
- Enregistrement sonore de mauvaise qualité
- Environnement d'écoute dégradé (faible volume pour ne pas déranger son voisin de bureau, vidéo visionnée dans le train sans écouteurs, ...)

Les solutions
- Proposer une transcription
- Sous-titrer la vidéo de façon synchronysée

Seconde mise en situation

Ecoutez attentivement cet extrait tiré d'un clip vidéo.

Pouvez-vous décrire la scène et ce que vous avez compris ?
Visualisons maintenant la scène (source : vidéothèque handicap.gouv.fr) :

Problèmes d'accès à l'image

Problèmes d'accès à l'image, dans quels cas ?
- Internautes malvoyants ou non-voyants
- Enregistrement vidéo de mauvaise qualité

Les solutions
- Proposer une transcription
- Audio-décrire la vidéo de façon synchronysée

D'autres problèmes d'accès

Les boutons du lecteur Flash de DailyMotion ont comme alternatives "0", "3", "6", "8", ... Se sont donc ces informations qui sont restituées à l'utilisateur d'une revue d'écran.
- Peut-être testé à l'aide d'une revue d'écran ou du logiciel aDesigner basé sur Eclipse.

D'autres problèmes d'accès :
- Manipulation des contrôles au clavier (handicap moteur, handicap visuel)
- Chargement d'une vidéo en connexion bas débit
- ...
Solutions :
- Rendre les boutons utilisables au clavier et leur donner des alternatives
- Proposer une transcription textuelle

Choisir un lecteur multimédia

Windows Media Player (Microsoft)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : non
- Langage de synchronisation : SAMI (Microsoft)
- Portabilité : Windows
QuickTime (Apple)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : uniquement dans sa version payante
- Langage de synchronisation : SMIL (W3C)
- Portabilité : Windows + Mac
RealPlayer (RealNetworks)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : oui
- Langage de synchronisation : SMIL (W3C)
- Portabilité : Windows + Mac + Linux
Aucun autre lecteur ne prend en charge le sous-titrage et l'audio-description synchronisés
Le lecteur a privilégier semble donc être RealPlayer (télécharger RealPlayer)

Créer les sous-titres (1)

A partir d'un moteur de reconnaissance vocale
- Solution complexe et coûteuse à développer
- Très peu de solutions sur le marché
  - Protitle (NinSight) basé sur le moteur de reconnaissance vocale SpeechRoot d'IBM (voir la démonstration faite par Jean-Louis Carvès lors de Paris Web 2007)
  - Solutions sous-titrage de Sysmedia
- Des projets open-source ou projets universitaires ?
- Google teste actuellement une solution de reconnaissance vocale sur Youtube pour améliorer le référencement des vidéos
"Manuellement" : la dactylographie, la vélotypie, la sténotypie assistée...
Faire appel à des communautés (par exemple dotSUB.com)
Formaliser les processus de création pour pouvoir réutiliser les documents écrits avant l'enregistrement d'une vidéo (réutilisation des scénarios, des guides d'entretien, ...)

Créer les sous-titres (2)

Nous allons maintenant travailler sur un autre clip tiré de handicap.gouv.fr. Consulter la vidéo : Thomas, 23 ans, souffrant d’une paraplégie (RealMedia, 2,59Mo).

Que mettre dans les sous-titres ?
- Retranscrire tous les contenus audio (dialogues, voix off, ...)
- Informations non-verbales utiles à la compréhension (rires, pleurs, bruit de pas hors champ, ...)
- Annoncer la personne qui parle
Comment mettre en forme les sous-titres ?
- Taille et contraste du texte suffisant
- Identifier la provenance des informations retranscrites
  - Comme le code couleur utilisé par France Télévision
    - Blanc, les dialogues (sous-titres placés sous l'acteur)
    - Jaune, les voix "off", les personnages hors-champs
    - Cyan, les pensées du personnage ou la voix du narrateur
    - Rouge, nature et description des bruits, cris, coups de feu.
    - Magenta, paroles de chansons, répliques de théâtre, poèmes, précisions sur une musique
    - Vert, indication de l'utilisation d'une langue étrangère
    - Avec * le son provient du téléphone, de la TV, un micro
  - Attention cependant à la seule utilisation des couleurs pour la transmission de l'information
- Annoncer la personne qui parle

Créer le fichier de sous-titres synchronisé

Regrouper les sous-titres et les mettre en forme dans un document .RT (RealText)
- Chaque sous-titre commence à un temps donné <time begin="00:00:29.00"/>
- Chaque sous-titre disparait au prochain sous-titre (la disparition peut être forcée par un sous-titre vide)

Code du fichier clip.rt

<window version="1.2" type="generic" extraspaces="use" wordwrap="true" width="320" duration="0:01:03.28" bgcolor="#000000">

<time begin="00:00:16.30"/><clear/><font face="Arial" size="2" color="#FFFFFF">Thomas : Merci.

<time begin="00:00:17.32"/><clear/> 

<time begin="00:00:27.00"/><clear/><font color="red">[Klaxon de vélo]</font>

<time begin="00:00:29.00"/><clear/> 

<time begin="00:00:32.00"/><clear/><font color="red">[Klaxon de voiture]</font>

<time begin="00:00:33.50"/><clear/> 

<time begin="00:00:38.35"/><clear/>Thomas : Ben dit donc, champion, t'as mis le temps, hein ?

<time begin="00:00:40.95"/><clear/> 

<time begin="00:00:41.86"/><clear/>Jeune homme : C'est trop galère ton truc.

<time begin="00:00:42.86"/><clear/> 

<time begin="00:00:43.58"/><clear/>Je te le rends, j'en peux plus moi.

<time begin="00:00:44.62"/><clear/> 

<time begin="00:00:46.11"/><clear/>Allez, bye, hein.

<time begin="00:00:46.56"/><clear/> 

<time begin="00:00:47.00"/><clear/>Thomas : A plus.

<time begin="00:00:48.00"/><clear/> 

<time begin="00:00:48.05"/><clear/>Jeune homme : Ouais, à plus.

<time begin="00:00:49.05"/><clear/> 

<time begin="00:01:03.28"/><clear/></font>
</window>

Ce fichier peut-être généré automatiquement à l'aide d'outils comme MagPie (NCAM)
- [Démonstration]

Synchroniser la vidéo et les sous-titres

A propos de SMIL
- Recommandation du W3C (version en cours depuis le 1er décembre 2008: SMIL 3.0)
- Fichier de texte structuré basé sur XML
- Permet de synchroniser divers éléments multimédia
Créer le fichier .SMIL
- Spécifications de la taille de la vidéo, de la taille de la zone des sous-titres
- Ajouter un lien vers la vidéo et vers le fichier de sous-titres

Code du fichier clip.st.smil

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <meta name="title" content="Changeons notre regard - Thomas - Démonstration"/>
    <meta name="author" content="Tektonika"/>
    <meta name="copyright" content="www.handicap.gouv.fr"/>
    <layout type="text/smil-basic-layout">
      <root-layout height="320" width="320" background-color="black"/>
      <region height="240" width="320" background-color="black" left="0"
            top="0" id="videoregion"/>
      <region height="80" width="320" background-color="black" left="0"
            top="240" id="textregion"/>
    </layout>
  </head>
  <body>
    <par dur="0:01:03.28">
      <video dur="0:01:03.28" region="videoregion" src="clip.rm" />
      <textstream dur="0:01:03.28" region="textregion" src="clip.rt" system-captions="on" />
    </par>
  </body>
</smil>

Ce fichier peut-être généré automatiquement à l'aide d'outils comme MagPie (NCAM)
- [Démonstration]

Aperçu du résultat

Ouvrir le fichier clip.st.smil avec RealPlayer
Attention, il est nécessaire d'activer les sous-titrages dans Real Player. Pour cela, aller dans le menu ">>", puis "Préférences", puis "Outils", puis sélectionner l’onglet "Contenu" et cocher l'option "Utiliser les légendes supplémentaires, si disponible".

Enregistrer les audio-descriptions (1)

Que mettre dans les audio-descriptions ?
- Contexte (présenter la scène, qui parle, ...) si nécessaire
- Ce qui montré à l'écran et qui est essentiel pour la compréhension de la vidéo (comme le passage silencieux de l'ombre de l'assassin, la vue d'un monument indiquant un lieu, ...)
- Rester concis et éviter les rédondances
Où placer les audio-descriptions ?
- Ne pas chevaucher une audio-description avec une information sonore de la vidéo
- Prévoir des "blancs sonores" sur les écrans d'introduction pour les audio-décrire

Enregistrer les audio-descriptions (2)

Voix naturelle

Exemple : voix enregistrée par défaut dans le clip proposée sur le site handicap.gouv.fr

Cette fois une automatisation est plus envisageable, il existe un grand nombre de synthèses vocales libres, propriétaires, gratuites, payantes sur le marché (Synthèses vocales sur Wikipedia)

Exemple : voix enregistrée à l'aide d'une synthèse vocale commerciale

Les textes qui apparaissent à l'écran doivent très souvent faire l'objet d'audio-descriptions. Lorsqu'il s'agit d'écrans de montage, les textes sont forcéments écrits dans un document et peuvent facilement être repris pour l'audio-description.

Synchroniser la vidéo et les audio-descriptions

Mettre à jour le fichier .SMIL
- Ajouter un lien vers le ou les fichier(s) d'audio-description (MP3 ou RA, ...)

Code du fichier clip.st.ad.smil

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/SMIL20/SMIL20.dtd">
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
  <head>
    <meta name="title" content="Changeons notre regard - Thomas - Démonstration"/>
    <meta name="author" content="Tektonika"/>
    <meta name="copyright" content="www.handicap.gouv.fr"/>
    <layout type="text/smil-basic-layout">
      <root-layout height="320" width="320" background-color="black"/>
      <region height="240" width="320" background-color="black" left="0"
            top="0" id="videoregion"/>
      <region height="80" width="320" background-color="black" left="0"
            top="240" id="textregion"/>
    </layout>
  </head>
  <body>
    <par dur="0:01:03.28">
      <video dur="0:01:03.28" region="videoregion" src="clip.rm" />
      <textstream dur="0:01:03.28" region="textregion" src="clip.rt" system-captions="on" />
	  <audio src="clip.mp3" dur="0:01:03.28" begin="0:00:00.00" systemAudioDesc="on"/>
    </par>
  </body>
</smil>

Ce fichier peut-être généré automatiquement à l'aide d'outils comme MagPie (NCAM)
- [Démonstration]

Aperçu du résultat

Ouvrir le fichier clip.st.ad.smil avec RealPlayer
Attention, il est nécessaire d'activer les audio-descriptions dans Real Player, aller dans le menu ">>", puis "Préférences", puis "Outils", puis sélectionner l’onglet "Contenu" et cocher l'option "Utiliser l’audio descriptif, si disponible".
Pour être sûr que le fichier .SMIL s'ouvre avec RealPlayer créer un fichier clip.ram contenant le chemin d'accès au fichier .SMIL

Ecrire la transcription

Reprendre les informations données dans les sous-titres et dans l'audio-description sous la forme d'un texte structuré de préférence.

France 3 présente, en collaboration avec le Conseil National Handicap, Un monde à changer.

Un jeune homme circule dans la rue avec un fauteuil roulant. Un autre jeune homme se fait servir à la terrasse d'un café.

- Thomas : Merci.

Le jeune homme en fauteuil essaie de passer sur le trottoir entre des vélos. Au café, l'autre regarde sa montre.
Le jeune homme en fauteuil bloqué par des poubelles descend puis remonte sur un trottoir avec difficulté [klaxon de vélo].
Il essaye de passer entre deux voitures garées sur le passage piéton [Klaxon de voiture].
Il rejoint l'autre jeune homme au café.

- Thomas : Ben dit donc, champion, t'as mis le temps, hein ?
- Jeune homme : C'est trop galère ton truc. Je te le rends, j'en peux plus moi.

Le jeune homme en fauteuil se lève et repart en roller.
L'autre reprend son fauteuil et part.

- Allez, bye, hein.
- Thomas : A plus.
- Jeune homme : Ouais, à plus.

Le jeune homme en roller le regarde partir.

Thomas, 23 ans, souffre d'une paraplégie. Changeons notre regard.

Et les Flash Players alors ?

Statistiques des prises en charge des formats de lecteur chez les internautes

Version alternative du graphique

Applications clients : Taux d'équipement des internautes (septembre 2008)
Adobe Flash Player	Java	Microsoft Windows Media Player	Apple QuickTime Player	Adobe ShockWave Player	Real One Player	SVG
99 %	82 %	77 %	64 %	58 %	47 %	7 %

Flash player, sous-titres et audio-descriptions

Le lecteur Flash doit être accessible au clavier (voir diaporamas précédents, les boutons possèdent des alternatives textuelles et sont utilisables avec le clavier)
Problèmes pour la navigation au clavier (impossibilité d'accéder à la tabulation sans une première prise de focus avec la souris sur certains navigateurs, impossibilité de sortir de l'animation une fois le focus à l'intérieur de celle-ci, ...)
Flash et Javascript, l'utilisation de l'attribut wmode="transparent" ou wmode="opaque" sort l'animation du flux d'information (l'animation ne sera pas lue par une revue d'écran)

Malgré cela un player Flash qui proposerait le sous-titrage et l'audio-description synchronysés aurait de nombreux avantages : intégration dans la page, affichage des sous-titres simple d'accès, ...

Flash player, ccPlayer

ccPlayer (NCAM)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : non
- Utilisable au clavier : oui
  - Testé à l'aide du logiciel aDesigner basé sur Eclipse.
- Accès au code source : oui
- Gestion des sous-titres multilingues
- Player libre de droit, accès au code source
- Fichier de sous-titrage : format DFXP, W3C (voir le fichier clip.dfxp.xml)

Flash player, JW FLV Player

JW FLV Player (LongTail Video)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : oui
- Utilisable au clavier : oui
- Accès au code source : oui
- Player avec une licence d'utilisation non-commerciale
- Fichier de sous-titrage : format DFXP
- En savoir plus sur JW FLV Player : Making Video Accessible

Flash player, Web Multimediale

Web Multimediale (Alessio Cartocci)
- Sous-titrage synchronisé : oui
- Audio-description synchronisée : oui
- Utilisable au clavier : pas entièrement
- Accès au code source : oui
- Gestion des sous-titres et des audio-descriptions multilingues
- Gestion d'une vidéo alternative en langue des signes (note: l'illustration en langue des signes ne correspond pas à la vidéo)
- Langages de synchronisation : SAMI (Microsoft), SMIL (W3C)
- Fichier de sous-titrage : format DFXP, W3C ou RealText
- Licence d'utilisation payante

Et les plateformes vidéos ? (1)

DailyMotion
- Interface d'édition des sous-titres
- Upload d'un fichier de sous-titre au format SRT (sous-titres SubRip, fichier SRT associé au clip)
- Gestion des sous-titres multilingues
- Activer les sous-titres en passant par le menu de la vidéo.

Et les plateformes vidéos ? (2)

Youtube
- Upload d'un fichier de sous-titre au format SRT (sous-titres SubRip)
- Gestion des sous-titres multilingues
- Traduction automatique des sous-titres
- Il est cependant impossible d'activer les sous-titres avec une navigation exclusive au clavier

Des questions ?

Cette présentation est disponible en ligne : www.ideance.net/accessibilite-videos/.
Apportez vos commentaires sur le blog www.tentatives-accessibles.eu.

Sébastien Delorme

sdelorme@atalan.fr