Lecteur multimédia

Description

Le but de cette fonctionnalité est d’aider les utilisateurs à s’assurer que les fichiers vidéo et audio intégrés dans leurs sites Web respectent les exigences des WCAG 2.0.

Justification

Il n’existe actuellement aucun module d’extension pour lecteur multimédia qui permet l’accessibilité complète à partir d’un clavier : en effet, il faut une souris pour accéder à une partie, voir à la plupart des fonctions des lecteurs vidéo. Le lecteur multimédia BOEW (Boîte à outils de l’expérience Web) permet à l’utilisateur de sélectionner toutes ses fonctions à l’aide de la touche de tabulation et de les activer en appuyant sur Entrée.

Formats de fichiers multimédias

Ce lecteur multimédia prend en charge plusieurs formats de fichiers, indiqués ci-dessous. Toutefois, nous vous recommandons de fournir les fichiers vidéo au moins dans le format MPEG4 (à l’aide des codecs H264 et AAC), afin que n’importe qui puisse les écouter : tous les lecteurs pour appareil mobile ainsi que la plupart des navigateurs Web sont en mesure de lire ce type de fichier. Nous vous recommandons également d’accompagner les fichiers MPEG4 d’une version en format WebM (à l’aide du codec VP8), afin de tirer profit de la prise en charge native des navigateurs, comme FireFox.

Éléments requis

1. Il faut placer chaque fichier multimédia dans son propre élément <figure> en utilisant la classe « wet-boew-multimedia » :

   <figure class="wet-boew-multimedia">

2. Chaque conteneur doit contenir une balise <video> ou <audio>.

   <source src="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/demo-fra.mp4" type="video/mp4" />

   Nota : Vous pouvez indiquer plus d’une source pour le vidéo : le lecteur lit simplement la première qui fonctionne (c.-à-d. qui est accessible, compatible, etc.)

3. Finalement, vous devez inclure la balise <track> lorsque vous utilisez celle <video>, car elle fournit les sous-titres associés à la vidéo :

   <track src="mediaplayer-transcript_captions-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />

   Nota : Lorsque vous utilisez la balise <audio>, vous devez inclure sur la page un lien vers une transcription du fichier audio en question. Ce lecteur multimédia prend en charge deux formats de sous-titres qui dépendent de la propriété data-type. Il s’agit des formats suivants : application/ttml+xml (anglais seulement), spécifié par le W3C et text/html, conçu pour la BOEW.

Nota : Afin de profiter de la conception adaptative, assurez-vous que le fichier vidéo se trouve dans un conteneur qui tire parti de la fonctionnalité de grilles.

<figure class="wet-boew-multimedia">
	<video width="480" height="270" poster="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/thumbnail.png" title="ignes directrices pour les passagers de petits avions">
		<source src="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/demo-fra.webm" type="video/webm" />
		<source src="http://hebergement-hosting.ca/hosting/sct-tbs/wet-boew/demo-fra.mp4" type="video/mp4" />
		<track src="mediaplayer-transcript_captions-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
	</video>
	<figcaption>
		<p>ignes directrices pour les passagers de petits avions (<a href="mediaplayer-transcript_captions-fr.html">Transcription</a>)</p>
	</figcaption>
</figure>

<figure class="wet-boew-multimedia">
	<audio title="Chevauchée des Walkyries">
		<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries.ogg" type="audio/ogg" />
		<source src="http://www.archive.org/download/RideOfTheValkyries/ride_of_the_valkyries_2.mp3" type="audio/mp3" />
	</audio>
	<figcaption>
		<p>Chevauchée des Walkyries</p>
	</figcaption>
</figure>