Dans quelle mesure le lecteur vidéo HTML est-il accessible ?

How accessible is the HTML video player?

Une partie de mon quotidien consiste à travailler avec des équipes pour guider et tester des solutions d'accessibilité. En particulier avec notre thème Debut (en cours d'exécution ici sur mon blog et ma boutique), sur lequel j'ai travaillé avec notre équipe Thèmes pour garantir une expérience hautement accessible aux magasins utilisant ce thème. Tout ce qui est ajouté doit être testé pour l'accessibilité avant le lancement.

Une nouvelle fonctionnalité que Shopify commence à déployer est la vidéo pour les produits . Le contenu vidéo, ainsi que les images du produit, aideront à présenter les détails du produit de manière dynamique.

Pour le lecteur vidéo, nous avons décidé d'expédier Plyr par défaut. J'ai fait cette recommandation à l'équipe en fonction de quelques critères clés :

  • Prise en charge de plusieurs plates-formes ; HTML natif, YouTube et Vimeo
  • Thème-capable afin d'avoir un look personnalisé pour "se fondre" avec un thème de vitrine
  • Open source (pratique si et quand nous envoyons des PR), et enfin
  • Plyr a été construit avec l'accessibilité à l'esprit

D'autres lecteurs vidéo accessibles personnalisés ont été envisagés, mais ne prenaient pas en charge toutes les fonctionnalités dont nous avions besoin.

Certaines personnes ont demandé plus de détails sur la raison pour laquelle nous avons décidé d'utiliser Plyr par opposition au lecteur video HTML natif.

"En quoi Plyr est-il plus accessible que les lecteurs natifs ? La video HTML n'est-elle pas déjà accessible ?"

Pour répondre à cette question, j'ai entrepris de mener une série de tests d'accessibilité aux lecteurs video natifs. Cela comprenait divers systèmes d'exploitation, navigateurs et lecteurs d'écran. Les résultats sont à peu près ce que j'attendais.

Tl;dr

Au cas où vous n'iriez pas jusqu'en bas, je pense, sur la base des résultats des tests de chaque lecteur (et de la comparaison avec mon propre projet de lecteur vidéo accessible ), que s'appuyer sur des lecteurs vidéo natifs doit être utilisé avec prudence . C'est mon opinion issue de l'expérience, mais j'ai trouvé que la plupart avaient un mauvais support du clavier et du lecteur d'écran, ce qui peut frustrer les utilisateurs.

Il y avait beaucoup d'incohérences dans tous les domaines en ce qui concerne la prise en charge du clavier et du lecteur d'écran. Certains perdent la mise au point lorsque les commandes vidéo reçoivent la mise au point, puis disparaissent, obligeant l'utilisateur à se repositionner pour ajuster la lecture. D'autres n'ont pas bloqué le focus du clavier en mode plein écran, ce qui a conduit à une situation similaire à celle d'une fenêtre modale inaccessible permettant d'accéder au contenu "derrière" la fenêtre. Un joueur en particulier présentait un support de clavier très maladroit où les commandes étaient visibles à l'écran mais ne pouvaient pas être focalisées.

Je n'ai pas testé les lecteurs intégrés YouTube ou Vimeo par eux-mêmes. Dans notre cas, devant prendre en charge plusieurs plates-formes, il était logique de ne tester Plyr qu'en tant que solution non native.

Voici les notes sur mes découvertes, d'abord en utilisant un clavier seul, puis un lecteur d'écran pour la plate-forme.

Détails du test

  • Il ne s'agit pas d'un test complet - seul le support du clavier et du lecteur d'écran a été inspecté pour l'accessibilité
  • Les combinaisons navigateur/lecteur d'écran utilisées lors des tests sont les plus couramment utilisées ( source )
  • Échantillon de test:
  • Environnement d'essai :
    • Windows 10
    • macOS Mojave
    • iOS 13.2.3
    • Android 10
    • Chrome 79
    • Firefox 71
    • Internet Explorer 11
    • Bord 44
    • MÂCHOIRES 2019.1909.28
    • NVDA 2019.2.1

video native – Clavier uniquement

mac OS + Safari

  • ✅ Commence avec un gros bouton de lecture
  • ✅ La vidéo est focalisable
  • ✅ Le bouton de lecture est focalisable
  • ❌ Style de mise au point un peu difficile à voir
  • ✅ Les commandes s'estompent lorsqu'elles sont mises au point, reviennent sur l'onglet
  • ❌ Impossible de lire/mettre en pause lorsque la vidéo est nette
  • ❌ Lors de l'ouverture du contrôle des sous-titres, le focus est perdu (revient en haut du DOM)
  • ❌ Le menu Légende permet d'appuyer sur la touche Tab, cependant, ce faisant, une sélection n'est pas effectuée sur Entrée ou Espace - l'utilisation des touches fléchées pour parcourir le menu permet de faire une sélection
  • ❌ Quitter le mode plein écran entraîne des contrôles non fonctionnels

macOS/Windows 10 + Chrome

  • ✅ Démarre avec toutes les commandes visibles et disponibles
  • ✅ Chaque contrôle est focalisable
  • ✅ Le menu peut être tabulé ou utiliser les touches fléchées
  • ✅ Scrubber prend en charge les touches fléchées
  • ✅ Styles de mise au point très visibles
  • ❌ Les commandes s'estompent pendant la lecture, la mise au point est perdue
  • ✅ Peut jouer/mettre en pause lorsque l'élément vidéo est au point
  • ✅ L' ouverture du menu CC nécessite une sélection, les touches fléchées ou Esc pour continuer
  • ✅ Quitter le plein écran envoie le focus sur l'élément actuellement sélectionné

macOS/Windows 10 + Firefox

  • ✅ Démarre avec toutes les commandes visibles
  • ❌ L'élément vidéo, le contrôle CC et les contrôles plein écran sont les seuls éléments focalisables
  • ❌ Le menu peut être tabulé mais se trouve à la fin du lecteur DOM
  • ✅ Scrubber prend en charge les touches fléchées gauche/droite, les touches fléchées volume haut/bas
  • ❌ Styles de mise au point difficiles à voir
  • ❌ Les commandes s'estompent pendant la lecture, pendant la tabulation, et ne reviennent que si le volume est ajusté
  • ❌ Peut jouer/mettre en pause uniquement lorsque l'élément vidéo est au point
  • ✅ L' ouverture du menu CC empêche l'appui sur la touche Tab en dehors du menu, force la sélection, les touches fléchées ou Esc
  • ❌ Les commandes ne sont pas disponibles pendant la lecture en plein écran
  • ❌ Sortie du plein écran, la mise au point est perdue

Windows 10 + Bord

  • ✅ Démarre avec toutes les commandes visibles et disponibles
  • ✅ Chaque contrôle est focalisable, y compris le temps écoulé/le contenu restant
  • ✅ Le menu et le volume nécessitent l'utilisation des touches fléchées
  • ✅ Scrubber prend en charge les touches fléchées
  • ❌ Styles de mise au point difficiles à voir
  • ✅ Les commandes ne s'estompent pas lors de la mise au point
  • ✅ Peut jouer/mettre en pause lorsque l'élément vidéo est au point
  • ✅ Quitter le plein écran envoie le focus sur l'élément actuellement sélectionné
  • ✅ L'espace met en pause la vidéo sur n'importe quel focus d'entrée
  • ✅ L' ouverture du menu CC nécessite une sélection, les touches fléchées ou Esc pour continuer

Windows 10 + IE11

  • ✅ Commence avec toutes les commandes visibles et disponibles, finit par s'estomper
  • ✅ Chaque contrôle est focalisable, y compris le temps écoulé/le contenu restant
  • ✅ Le menu et le volume nécessitent l'utilisation des touches fléchées
  • ✅ Scrubber prend en charge les touches fléchées
  • ❌ Styles de mise au point difficiles à voir
  • ✅ Les commandes ne s'estompent pas lors de la mise au point
  • ✅ Peut jouer/mettre en pause lorsque l'élément vidéo est au point
  • ✅ Quitter le plein écran envoie le focus sur l'élément actuellement sélectionné
  • ✅ L'espace met en pause la vidéo sur n'importe quel focus d'entrée
  • ✅ L' ouverture du menu CC nécessite une sélection, les touches fléchées ou Esc pour continuer

video native - Prise en charge du lecteur d'écran

macOS + Safari + VoiceOver

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible

iOS + Safari + VoiceOver

  • ✅ Toutes les commandes comportent des étiquettes claires via le doigt uniquement ( ❌ les gestes de balayage ne révèlent pas les commandes)
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ✅ Lors de l'interaction avec la lecture, la mise en sourdine, etc., une nouvelle étiquette/valeur est annoncée
  • ✅ Le contenu "derrière" la vidéo plein écran n'est pas accessible

Android + Chrome + Talkback

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ❌ Lors de la lecture de la vidéo, les commandes s'estompent et ne reviennent pas

Windows + Chrome + JAWS

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ✅ Lors de l'interaction avec la lecture, la mise en sourdine, etc., une nouvelle étiquette/valeur est annoncée
  • ✅ Le contenu "derrière" la vidéo plein écran n'est pas accessible

Windows + IE11 + JAWS

  • ❌ Commandes non annoncées lors de l'utilisation de la touche Tab
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Les commandes sont annoncées mais non fonctionnelles lors de l'utilisation du curseur virtuel
  • ✅ Contrôles annoncés et fonctionnels lors de la navigation via la navigation des contrôles de formulaire uniquement
  • ✅ Lorsque l'épurateur est au point, une annonce est faite déclarant uniquement la valeur du temps écoulé
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est accessible

Windows + Firefox + JAWS

  • ❌ Certaines commandes ne comportent pas d'étiquette
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Une annonce continue est faite déclarant le pourcentage de valeur périmée lorsqu'un contrôle a le focus
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est accessible

Windows + Chrome + NVDA

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ✅ Lors de l'interaction avec la lecture, la mise en sourdine, etc., une nouvelle étiquette/valeur est annoncée
  • ✅ Le contenu "derrière" la vidéo plein écran n'est pas accessible

Windows + IE11 + NVDA

  • ❌ Commandes non annoncées lors de l'utilisation de la touche Tab
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Contrôles introuvables lors de la navigation via la navigation des contrôles de formulaire

Windows + Firefox + NVDA

  • ❌ Certaines commandes ne comportent pas d'étiquette
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ✅ Contrôles annoncés et fonctionnels lors de la navigation via la navigation des contrôles de formulaire
  • ❌ Un bruit continu est émis en déclarant la valeur écoulée en pourcentage lorsqu'un contrôle est mis au point
  • ✅ Lors de l'interaction avec la lecture, la mise en sourdine, etc., une nouvelle étiquette/valeur est annoncée
  • ❌ La lecture de la vidéo perd parfois l'accès aux commandes des boutons, les utilisateurs ne peuvent pas mettre en pause

Plyr – Clavier uniquement

Tous les navigateurs

  • ✅ Commence avec un gros bouton de lecture et toutes les commandes sont visibles
  • ✅ Le conteneur vidéo est focalisable
  • ✅ Le bouton de lecture et toutes les commandes sont focalisables
  • ✅ Style de mise au point très visible
  • ✅ Les commandes s'estompent lorsqu'elles sont mises au point, reviennent sur l'onglet
  • ✅ Peut lire/mettre en pause lorsque le conteneur vidéo est au point
  • ✅ Lors de l'ouverture du contrôle des paramètres, le focus est envoyé à l'élément actuel, Esc renvoie le focus au contrôle des paramètres
  • ✅ Le menu Paramètres permet d'appuyer sur la touche Tab ou les touches fléchées
  • ✅ L'espace met en pause la vidéo sur n'importe quel focus d'entrée (sans bouton)
  • ✅ Quitter le plein écran envoie le focus sur l'élément actuellement sélectionné

Plyr – Prise en charge du lecteur d'écran

macOS + Safari + VoiceOver

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ✅ Le contrôle de lecture inclut le titre de la vidéo
  • ❌ Le conteneur vidéo n'a pas de nom ou de rôle accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible
  • ✅ Le réglage de la sourdine annonce la valeur
  • ✅ Les contrôles de paramètres sont accompagnés d'attributs ARIA pour le contexte

iOS + Safari + VoiceOver

  • ✅ Toutes les commandes comportent des étiquettes claires via des gestes du doigt et du balayage
  • ❌ Le conteneur vidéo n'a pas de nom accessible
  • ❌ Lorsque le scrubber est mis au point, le réglage n'est pas disponible
  • ✅ Lors de l'interaction avec la lecture, la mise en sourdine, etc., une nouvelle étiquette/valeur est annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible

Android + Chrome + Talkback

  • ✅ Toutes les commandes comportent des étiquettes claires via des gestes du doigt et du balayage
  • ✅ Le conteneur vidéo a un nom accessible
  • ✅ Lorsque l'épurateur est au point, réglage via la bascule du volume
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible
  • ❌ La mise au point est perdue lorsque vous passez au-delà du contrôle des sous-titres

Windows + N'importe quel navigateur + NVDA

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ✅ Le contrôle de lecture inclut le titre de la vidéo
  • ❌ Le conteneur vidéo n'a pas de nom ou de rôle accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible
  • ✅ Le réglage de la sourdine annonce la valeur
  • ✅ Les contrôles de paramètres sont accompagnés d'attributs ARIA pour le contexte
  • ❌ Lors de l'interaction avec la sourdine, les paramètres, etc., la mise au point peut être perdue sur l'élément vidéo, n'active pas le contrôle

Windows + n'importe quel navigateur + JAWS

  • ✅ Toutes les commandes comportent des étiquettes claires
  • ✅ Le contrôle de lecture inclut le titre de la vidéo
  • ❌ Le conteneur vidéo n'a pas de nom ou de rôle accessible
  • ❌ Lorsque l'épurateur est au point, une annonce continue est faite déclarant la valeur de temps écoulé
  • ❌ Lors de l'interaction avec la lecture, la mise en sourdine, etc., la nouvelle étiquette/valeur n'est pas annoncée
  • ❌ Le contenu "derrière" la vidéo plein écran est toujours accessible
  • ✅ Le réglage de la sourdine annonce la valeur
  • ✅ Les contrôles de paramètres sont accompagnés d'attributs ARIA pour le contexte

Conclusion de l'essai

  • Les lecteurs vidéo natifs sont assez incohérents dans leur prise en charge du clavier et du lecteur d'écran
  • Firefox semble avoir l'expérience la plus médiocre dans l'ensemble
  • Plyr est notre recommandation et bien qu'il offre beaucoup de points positifs, il y a place à l'amélioration - nous pouvons envoyer des relations publiques si nécessaire
Retour au blog