Comment faciliter l’identification et le contrôle des médias pour une meilleure prise en main par l’internaute ?

Ce que j’ai fait :

• lire l’article Recommandations accessibilité des contenus vidéos, animations et audios(lien externe) d’Orange
• lire l’article Multimédia(lien externe) de Tosca Consultants
• lire l’article 8 Steps to Creating Accessible Video(lien externe) de Gian Wild
• lire l’article Multimédia(lien externe) du Guide du Concepteur

Ce que j’ai appris

Identifier les médias temporels

Chaque média temporel intégré dans une page doit pouvoir être clairement identifié. Par exemple : un titre ou un texte adjacent explicite la nature et la fonction du média. L’absence d’identification peut en effet se révéler très problématique. Imaginons une page contenant une dizaine de vidéos et un internaute aveugle à la recherche d’une vidéo spécifique : en l’absence d’intitulé pour chacune d’elle, l’internaute se verra dans l’obligation de lancer les vidéos une à une pour trouver celle qu’il recherche.

Sur la page Colors with good contrast(lien externe) du W3C (World Wide Web Consortium), la vidéo relative à l’article possède un titre visuellement caché mais accessible aux technologies d’assistance :

<h2 id="film" class="no-display">Video on Colors with Good Contrast</h2>

Fournir une alternative aux médias non temporels

Les médias non temporels insérés via une balise <object>, <embed>, <video>, <audio>, <svg> ou <canvas> doivent posséder une alternative. Cette alternative peut être accessible via un lien ou un bouton adjacent. L’alternative peut se situer dans la page elle-même (le lien sera alors une ancre), ou dans une autre page. Les conditions suivantes doivent être respectées :

• le lien (ou bouton) adjacent doit être accessible

• l’alternative doit être accessible

• l’alternative doit permettre d’accéder aux mêmes contenus ou fonctionnalités, de réaliser les mêmes actions

Par exemple, prenons le cas d’un graphique représenté dans une balise <canvas>. Une alternative possible serait un tableau en HTML (HyperText Markup Language) reprenant les données représentées. C’est une des solutions proposées par Canvas Charts(lien externe) qui génère ses graphiques dans une balise <canvas> à partir de tableaux HTML, qui consituent ainsi une alternative accessible.

Contrôle des médias

Pas de déclenchement automatique

Il est important de laisser à l’internaute le contrôle d’un média intégré dans une page. Le lancement automatique est souvent une source de frustration pour bon nombre d’internautes et peut causer de réelles difficultés à certains utilisateurs et utilisatrices. Par exemple : une personne aveugle ou mal-voyante naviguant sur une page, où le son d’un média se déclenche automatiquement, aura des difficultés à entendre le son de la synthèse vocale en parallèle.

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) recommande ainsi que chaque contenu en mouvement ou clignotant soit contrôlable par l’internaute. On retiendra donc les points suivants :

• les fichiers audio d’une durée supérieure à 3 secondes ne doivent pas se déclencher automatiquement

• les fichiers vidéo d’une durée supérieure à 5 secondes ne doivent pas se déclencher automatiquement

• les fichiers vidéo ne doivent pas contenir de séquence flashant plus de 3 fois par seconde : en 1997, la diffusion de l’épisode “Le Soldat ordinateur Porygon” de la série animée Pokémon a provoqué des crises d’épilepsie entraînant l’admission de plus de 150 enfants à l’hôpital (voir à ce sujet l’article Dennō Senshi Porigon(lien externe) de Wikipédia). L’épisode comportait en effet une séquence flashant plus de 10,8 fois par seconde

Un menu de contrôle accessible

L’internaute doit avoir la possibilité de contrôler le média avec son clavier et tout dispositif de pointage (avec la souris ou le touch). Le média doit :

• être accessible et donc recevoir un focus visible

• être activable : par exemple la touche “entrée” ou le clic permettent d’activer le bouton “Lecture”

Pour les médias temporels, les fonctionnalités suivantes sont recquises à minima :

• contrôle du flux vidéo ou audio grâce aux fonctionnalités lecture, pause ou stop

• contrôle du niveau sonore (activation/désactivation, augmenter ou baisser) : le RGAA préconisait initialement un niveau sonore 20 décibels plus haut que celui de l’arrière plan mais ce critère AAA a été abandonné dans la version 4

• activation et désactivation de l’affichage des sous-titres

• activation et désactivation de l’audio-description

Enfin, les médias temporels et non temporels doivent être compatibles avec les technologies d’assistance. Le RGAA précise ainsi :

Le nom, le rôle, la valeur, le paramétrage et les changements d’état des composants d’interface doivent être accessibles aux technologies d’assistance via une API d’accessibilité.

Autrement dit, les informations de nom, de propriété et d’état des boutons d’un lecteur vidéo par exemple doivent être correctement restituées par les technologies d’assistance, sans quoi tout le monde ne seras pas en mesure d’en contrôler la lecture. Si le média n’est pas compatible avec les technologies d’assistance, une alternative accessible doit être proposée.

Exemples de contenus multimedia accessibles

• Lecteurs audio/vidéo :
  • le lecteur vidéo/audio HTML 5 Able Player(lien externe)
  • le lecteur vidéo/audio MFPlayer(lien externe)
• Vidéos en ligne :
  • Vidéos accessibles sur le site du FIPHFP(lien externe)
  • Vidéo “Colors width good contrast” du W3C(lien externe)