Accessibilité du lecteur vidéo « Acorn Media Player »
L’objectif de ce billet est de présenter les résultats d’une analyse non-exhaustive de l’accessibilité du lecteur vidéo « Acorn Media Player ».
Informations pratiques
- Date de l’analyse : octobre 2014.
- Page de présentation de « Acorn Media Player »
(en anglais). - Page GitHub de « Acorn Media Player » (en anglais).
- Version testée : « Defaults » (soit, la première de la page de démonstration).
- Outils utilisés pour les tests :
- Firefox 33.
- Extension « Firebug ».
- Lecteur d’écran « NVDA 2014.3 ».
- Player basé sur jQuery.
- Projet Open Source : MIT License (en anglais).
Support du sous-titrage 
Ce player permet d’associer plusieurs fichiers de sous-titres de différentes langues pour une même vidéo.
Par défaut, les sous-titres sont désactivés.
Pour les afficher, il s’agit de cliquer sur le bouton « Captions » et de choisir la langue des sous-titres souhaitée.
À noter au passage que sur la version de démonstration testée, les sous-titres sont parfois difficilement lisibles (textes blanc sur fond clair).
Pour y remédier, une solution pourrait consister à les superposer sur un arrière-plan foncé.
La recommandation correspondante de la notice AcceDe Web pour la conception graphique est la suivante : Prévoir une mise en forme des sous-titres qui permet de garantir leur lisibilité .
Support de l’audiodescription 
Ce lecteur vidéo ne permet pas d’associer des fichiers d’audiodescription aux vidéos.
Présence des boutons de contrôle 
Parmi les boutons de contrôle du player attendus par les référentiels d’accessibilité français, « Acorn Media Player » propose les boutons suivants :
- Lecture.
- Pause.
- Contrôle du volume sonore.
Seul le bouton « Stop » permettant de revenir au tout début de la vidéo est manquant.
À noter toutefois que ce manque n’est pas des plus critiques pour l’accessibilité, le slider d’avancement dans la vidéo permettant de réaliser cette action.
Intégration technique des boutons de contrôle
Play, Mute, Captions et Fullscreen
Ces boutons de contrôle du lecteur sont correctement balisés avec des éléments <button> et sont parfaitement explicites.
Les intitulés sont sous forme de texte visible à l’écran.
Ils sont donc disponibles dans tous les contextes de consultation, quelque soit la configuration du poste de travail de l’utilisateur et les aides techniques utilisées :
- Non chargement des images (mode de contraste élevé activé sous Windows, par exemple).
- Consultation avec un lecteur d’écran (synthèse vocale et/ou plage braille).
- CSS désactivé.
- Etc.
Infobulles
J’ai toutefois une petite réserve : elle concerne les infobulles (attribut title) affectées à certains boutons :
- Le bouton « Play » dispose d’une infobulle « Start the playback » qui, d’après moi, n’apporte pas d’informations supplémentaires à l’intitulé du lien.
Idem pour les boutons « Pause », « Captions » et « Fullscreen ». - Les boutons « Mute » et « Unmute » possèdent des infobulles redontantes/identiques avec les intitulés des boutons, eux-même.
Ces infobulles pourraient donc être retirées.
Boutons de contrôle de l’avancement et du volume
Mention spéciale pour l’intégration technique des sliders de contrôle de l’avancement dans la vidéo et du volume sonore !
Ils sont notamment parfaitement accessibles aux personnes aveugles ou malvoyantes se servant d’un lecteur d’écran (pour rappel, testé avec la combinaison Firefox 33/NVDA 2014.3).
Comme pour les autres boutons, ils sont disponibles dans tous les contextes de consultation.
À l’exception de la consultation sans le support des CSS, la pastille de la barre d’avancement et la barre verticale du contrôle du volume étant justement intégrées via CSS.
Mais ce point n’est que peu critique/bloquant.
Navigation au clavier
La totalité des boutons de contrôle sont utilisables au clavier seul.
C’est parfait à ce niveau là !
Visibilité de la prise de focus
Très bon point, de nouveau !
La prise de focus des boutons de contrôle suivants est bien visible (changement de couleur + outline) :
- Play/Pause.
- Mute/Unmute.
- Captions.
- Fullscreen.
- Contrôle de l’avancement.
En revanche, la prise de focus du bouton de contrôle du volume n’est pas très visible. Seul un tout léger changement de couleur est proposé (passage d’un gris clair à un blanc).
Il serait pertinent d’accentuer quelque peu cet effet.
Ordre de tabulation
L’ordre d’atteinte des boutons de contrôle au clavier est le suivant :
- Play.
- Avancement dans la vidéo.
- Mute.
- Volume sonore.
- Fullscreen.
- Captions.
- Menu déroulant « Captions ».
Bien que cet ordre est plutôt correct, il pourrait toutefois être quelque peu revu pour proposer :
- Avancement dans la vidéo.
- Play.
- Mute.
- Volume sonore.
- Captions.
- Menu déroulant « Captions ».
- Fullscreen.
Vous avez des questions, des remarques, des compléments à apporter ?
N’hésitez surtout pas, le formulaire de dépôt de commentaires et moi n’attendons que cela. ;)
Ce billet fait partie d’une série de billets portant sur les lecteurs vidéo HTML5 accessibles.