retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Multimédia > Fiche 4.2

Fiche 4.2 : Le contenu multimédia est-il synchronisé avec son alternative ?

Carte d'identité

  • Critère AccessiWeb : 4.2
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 1.4

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

revenir en haut de la page

Comment évaluer

Par le code source

  1. Il est possible de lire le code utilisé pour la présentation multimédia (SMIL par exemple) et vérifier ainsi qu'il respecte les standards. Cependant, il suffit de lancer la présentation multimédia dans un lecteur multimédia pour s'apercevoir tout de suite si elle contient une alternative équivalente synchronisée.

Par l'utilisation d'outils

Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.

Evaluer avec la barre AccessiWeb (version 1.0) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "4. Multimedia" de la Barre AccessiWeb, activer le critère 4.2.
  3. Le code source de la page s'affiche dans une nouvelle fenêtre.
  4. Il est possible de lire le code utilisé pour la présentation multimédia (SMIL par exemple) et vérifier ainsi qu'il respecte les standards. Cependant, il suffit de lancer la présentation multimédia dans un lecteur multimédia pour s'apercevoir tout de suite si elle contient une alternative équivalente synchronisée.

Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
  1. Cliquer sur le menu "Source", puis sur l'option "Voir le code source [Nouvelle fenêtre]"
  2. Il est possible de lire le code utilisé pour la présentation multimédia (SMIL par exemple) et vérifier ainsi qu'il respecte les standards. Cependant, il suffit de lancer la présentation multimédia dans un lecteur multimédia pour s'apercevoir tout de suite si elle contient une alternative équivalente synchronisée.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :
Ce critère n'est pas évaluable par la barre d'outils Web Developer version 1.0.2 pour Firefox.

Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

C'est le développeur HTML qui va implémenter ce critère mais c’est au rédacteur de contenu de fournir le contenu des sous-titres associés à la présentation de multimédia, le contenu de l’audio-description si celle-ci est possible et les temps de synchronisation.

Implémentation

Le W3C préconise l'utilisation du langage de programmation SMIL (Synchronized Multimedia Integration Language), en français : langage d'intégration multimédia synchronisée. Il permet d'intégrer des éléments multimédia sur le Web. Le mot "synchronisé" indique bien que ces éléments (images, mais aussi sons, vidéos, textes...) peuvent être synchronisés les uns avec les autres, pour créer au final de véritables présentations multimédia. Sa capacité à séparer les médias permet d'obtenir un contenu plus léger à charger.

Il faut veiller à implémenter le fichier multimédia de telle manière que l’internaute puisse le consulter quelque soit son aide technique (plage braille, raccourcis claviers, …) et en gardant toujours le contrôle (en l’état actuel des plugins, il semble que seule la lecture dans un lecteur multimédia extérieur permette de respecter ces 2 exigences qui correspondent au critère AccessiWeb 13.7. Plus d’informations sur la fiche 13.7).

Pour implémenter les sous-titres, il faut d'abord écouter la bande son de la présentation multimédia et transcrire le texte et son temps de synchronisation. Puis, soit à l'aide d'un éditeur de texte, soit avec un outil de synchronisation type MAGpie, il faut créer le fichier texte SMIL qui contient les informations pour le contenu des sous-titres et des temps de synchronisation avec les images de la présentation multimédia.

Il faut veiller à ce que l’internaute qui la lira via un lecteur multimédia puisse choisir de lire ou pas les sous-titres (en l’état actuel des lecteurs multimédias gratuits sur le Web, il semble que les 3 lecteurs multimédias les plus connus permettent ce choix: Window Media Player, Quicktime et Real Player). Si vous synchronisez les sous-titres avec la présentation multimédia en utilisant SMIL, vous devez mettre l'attribut systemCaptions à "on" dans votre fichier SMIL principal pour laisser à l'internaute le choix de lire ou pas les sous-titres (note: dans la version 1.0 de SMIL, il s'agit de l'attribut system-captions).

Pour implémenter l'audio-description et si cela est nécessaire et possible, il faut d'abord lire la présentation multimédia et décider quelles informations descriptives doivent être dites et leurs temps de synchronisation. Puis, soit à l'aide d'un magnétophone multimédia comme celui présent dans Accessoires sous Windows, soit avec un outil de synchronisation type MAGpie, il faut créer le fichier texte SMIL qui contient les liens vers les informations sonores pour le contenu de l'audio-description et les temps de synchronisation avec les images de la présentation multimédia.

Quand une audio-description est insérée dans une présentation multimédia, il faut veiller à ce que l’internaute qui la lira via un lecteur multimédia puisse choisir d'écouter ou pas cette audio-description (en l’état actuel des lecteurs multimédias gratuits sur le Web, il semble que Window Media Player ne lise pas la piste sonore d’audio-description, que Quicktime la lise mais ne permette pas de contrôler son utilisation, que Quicktime Pro le permette mais est payant et que seul Real Player la lise et permette également son contrôle par l’internaute). Si vous synchronisez l'audio-description avec la présentation multimédia en utilisant SMIL, vous devez mettre l'attribut systemAudioDesc à "on" dans votre fichier SMIL principal pour laisser à l'internaute le choix d'écouter ou pas l'audio-description (note: cet attribut existe uniquement dans la version 2.0 de SMIL).

Exemple de mauvaise pratique

Note: les éléments multimédia présentés dans ce paragraphe sont issus du WAI WCAG Curriculum: Multimedia Software Page. Les codes sources ont été modifiés pour les besoins propres à ce paragraphe.

Dans le code ci-après, un lien vers une video est proposée (video sur "une voiture et Einstein"). Mais elle ne contient ni sous-titres, ni audio-description.

<html>
<body>
Voir la
<a href="http://www.domaine.com/car.smi">
video sur "une voiture et Einstein" (format <span lang="en">SMIL</span>, 515 <acronym title="kilo octets">ko</acronym>)
</a>.
</body>
</html>

Le code source du fichier SMIL "car.smi" est le suivant:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="Car"/>
<meta name="author" content="NCAM/NOVA"/>
<meta name="copyright" content="©1998 WGBH Educational Foundation" />
<layout>
<root-layout background-color="black" height="180" width="250"/>
<region id="videoregion" background-color="black" top="5" left="35" height="130" width="180"/>
<region id="textregion" top="135" left="-37" height="120" width="250"/>
</layout>
</head>

<body>
<par>

<!-- VIDEO -->
<video src="carsilent.rm" region="videoregion"/>

<!-- PROGRAM AUDIO -->
<audio src="carnarren.rm"/>

</par>
</body>
</smil>

Exemple de bonne pratique

Note: les éléments multimédia présentés dans ce paragraphe sont issus du WAI WCAG Curriculum: Multimedia Software Page. Les codes sources ont été modifiés pour les besoins propres à ce paragraphe.

Dans le code ci-après, un lien vers une video est proposée (video sur "une voiture et Einstein"). Cette video propose des sous-titres synchronisés et une audio description synchronisée. Un lien pour télécharger un lecteur multimedia est donné, ainsi que des renseignements pour bien utiliser les fonctionnalités d'accessibilité. De plus, un message informe l'internaute qu'un fichier texte de transcription de la video (contenant l'alternative textuelle équivalente à cette video) est également disponible.

<html>
<body>
Vous pouvez consulter la video sur "une voiture et Einstein" via un lecteur multimedia (<a href="http://france.real.com/freeplayer_r1p.html">télécharger le lecteur <span lang="en">Real Player</span> en français</a>) ou lire le fichier texte contenant sa transcription. Cette video contient des sous-titres et une audio-description synchronisées. Vous avez la possibilité des les consulter en sélectionnant l'option d'affichage des sous-titres synchronisés ("Utiliser les légendes supplémentaires, si disponibles") et l'option d'écoute de l'audio-description ("Utiliser l'audio-descriptif, si disponible.") dans le menu "Outils > Préférences > Contenu > Accessibilité" du lecteur <span lang="en">Real Player</span>.

<ul>
<li>
Voir la
<a href="http://www.domaine.com/car.smi">
video sur "une voiture et Einstein" (format <span lang="en">SMIL</span>, 515 <acronym title="kilo octets">ko</acronym>)
</a>.
</li>

<li>
Lire la
<a href="http://www.domaine.com/transcription_car.txt">
transcription texte de la video sur "une voiture et Einstein" (<acronym title="texte">txt</acronym>, 2 <acronym title="kilo octets">ko</acronym>)
</a>.
</li>
</ul>

</body>
</html>

Le code source du fichier SMIL "car.smi" est le suivant:

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head>
<meta name="title" content="Car"/>
<meta name="author" content="NCAM/NOVA"/>
<meta name="copyright" content="©1998 WGBH Educational Foundation" />
<layout>
<root-layout background-color="black" height="180" width="250"/>
<region id="videoregion" background-color="black" top="5" left="35" height="130" width="180"/>
<region id="textregion" top="135" left="-37" height="120" width="250"/>
</layout>
</head>

<body>
<par>

<!-- VIDEO -->
<video src="carsilent.rm" region="videoregion"/>

<!-- PROGRAM AUDIO -->
<audio src="carnarren.rm"/>

<!-- CAPTIONS -->
<textstream src="carcapsen.rt" region="textregion" systemCaptions="on"/>

<!-- AUDIO-DESCRIPTION -->
<audio src="cardescen.rm" systemAudioDesc="on"/>

</par>
</body>
</smil>

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 4.1 Fiche suivante : fiche 5.1

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact