Accessibilité du lecteur multimédia

Aperçu: Accessibilité du lecteur multimédia

Le lecteur multimédia doit être accessible par le clavier et compatible avec les lecteurs d’écran. Le lecteur multimédia HTML5 intégré par défaut aux navigateurs est insuffisant, car les navigateurs et les lecteurs d’écran prennent en charge différemment les fonctionnalités d’accessibilité. La solution consiste à adopter un lecteur multimédia qui a été conçu et testé pour assurer l’accessibilité.

Les lecteurs multimédias accessibles comprennent Able Player, OzPlayer, Nomensa media player, PayPal media player, et YouTube.

Accessibilité par le clavier

• Toutes les commandes peuvent être focalisées au moyen de la touche de tabulation :
  • Si vous utilisez un bouton HTML natif, la commande sera focalisée automatiquement.
  • Si vous utilisez un bouton personnalisé (comportant un élément <div> ou <span>), vous devez utiliser l’attribut tabindex="0".
• Les commandes comportent un indicateur visible de focus du clavier.
• L’ordre des commandes activées par la touche de tabulation correspond à l’ordre visuel, de gauche à droite.
• Les commandes peuvent être activées par le clavier :
  • Les commandes Lecture/Pause sont activées par la touche Entrée ou la barre d’espacement.
  • Le contrôle du volume est activé par les touches fléchées, généralement la flèche haut et la flèche du bas.
  • Les commandes Avancer/Reculer sont activées par les touches fléchées, généralement la flèche gauche et la flèche droite.
  • D’autres commandes comme Sous-titres et Plein écran sont activées par la touche Entrée ou la barre d’espacement.
• Le texte, les commandes et les arrière-plans présentent un contraste suffisant entre les couleurs.

Accessibilité des lecteurs d’écran

Chaque commande présente aux lecteurs d’écran son nom, son rôle et sa valeur (si une ou plusieurs sont définies).

• Name: l’étiquette de la commande, p. ex. « Lecture », « Pause » ou « Volume ». Le nom est extrait soit du nœud enfant du bouton (<button>Lecture</button>) soit de l’attribut aria-label ou aria-labelledby.
• Role: la fonctionnalité contrôlée par la commande, p. ex. « Bouton », « Curseur ». Un élément <button> natif déclare automatiquement son rôle comme « boutton ». Une commande personnalisée utilise généralement l’attribut role="button". La commande de volume est une exception : elle utilise l’attribut role="slider".
• Value: les attributs ou l’état actuel d’un élément, p. ex. « 50 % » pour le volume. Le curseur de volume comporte une valeur en pourcentage qui, une fois modifiée, est déclaré par les lecteurs d’écran. Consultez le Module 12 > Curseurs pour en savoir plus sur la façon de procéder.

Prise en charge des sous-titres, des audiodescriptions et des transcriptions

Le lecteur multimédia idéal offre la prise en charge intégrée des sous-titres, des audiodescriptions et des transcriptions.

Certains lecteurs multimédias ajoutent toutes les fonctionnalités d’accessibilité à un menu accessible au moyen du bouton de sous-titrage codé. De préférence, le lecteur fournit un bouton distinct pour chaque fonction, avec son icône normalisée :

• icône pour sous-titres
• icône pour transcription
• icône pour audio description
• icône pour langue des signes

Il existe des solutions de rechange si le lecteur multimédia ne permet pas l’intégration aisée des fonctions d’accessibilité :

• Ajoutez des sous-titres visibles gravés dans la vidéo plutôt que des sous-titres codés (l’utilisateur ne peut pas personnaliser leur apparence).
• Ajoutez la transcription directement ou par un lien à côté de la vidéo.
• Ajoutez l’audiodescription dans une vidéo distincte (plus longue) facilement accessible pour l’utilisateur.