Accessibilité du nouveau Vimeo

Sophie Schuermans le 03/02/2014 - Réagissez

Vimeo a récemment annoncé le lancement de son nouveau lecteur multimédia. Ce nouveau lecteur n'utilise plus Flash mais HTML5 et il serait accessible. L'ancien lecteur ne l'était pas du tout et nous avions déconseillé de l'utiliser tel quel. Nous avons fait des tests pour voir si le nouveau lecteur offre une solution suffisamment accessible.

Flash encore très présent

Notre but était de tester la nouvelle version HTML5 du lecteur. Vimeo dit que le lecteur HTML5 est utilisé partout où c'est possible. Mais le lecteur Flash est encore utilisé dans certains navigateurs récents: les versions de Internet Explorer antérieures à IE11, Firefox pour Mac et Opera.

Certains types de fichier vont toujours être présentés dans la version Flash du lecteur. Dès qu'une vidéo est sous-titrée, c'est également le lecteur Flash qui est utilisé dans Firefox.

C'est un problème car la version Flash du lecteur n'est pas accessible du tout:

  • Le lecteur Flash n'est pas correctement utilisable au Clavier dans IE car les boutons de contrôle disparaissent.
  • Les boutons du lecteur Flash ne sont pas nommés et sont lus 'non étiqueté 1 bouton, 'non étiqueté 2 bouton', etc... jusqu'à 14.

Navigation au clavier

Dans le lecteur HTML5 de Vimeo, les boutons de contrôle peuvent être utilisés au clavier mais pas toujours de manière optimale. Le principal problème rencontré est la disparition des boutons de contrôle après quelques secondes.

En utilisant TAB, on parcourt d'abord le titre et infos sur la vidéo, puis les boutons 'Play', 'volume, 'CC', 'Full screen' et 'Vimeo', pour terminer avec les boutons 'J'aime', 'regarder plus tard' et 'Partager'.

ordre de tabulation dans Vimeo

Tant que l'on ne démarre pas la vidéo on peut naviguer dans le lecteur sans problème au moyen du clavier. Mais à partir du moment où on démarre la vidéo, les boutons de contrôle disparaissent rapidement. Le prochain tab amène alors au prochain lien dans la page après le lecteur vidéo. Si l'on revient en arrière (shift+tab), le comportement varie d'un navigateur à l'autre. Dans Chrome, Firefox et IE les boutons réapparaissent dès que le tab rencontre un bouton du lecteur. On peut alors les parcourir en sens inverse pour arriver où l'on veut. Il semble même qu'après cela ils restent visibles jusqu'à la fin. Mais dans Safari, il n'est pas possible de déplacer à nouveau le focus à l'intérieur du lecteur en tabulant en arrière.

C'est également dommage que le focus ne soit presque pas visible sur le bouton 'Play' dans Firefox. Il serait utile d'accentuer le focus (en copiant ce que l'on fait déjà pour hover).

Navigation au clavier, avec lecteur d'écran

Les boutons de contrôle du nouveau lecteur HTML5 sont bien nommés. Lorsqu'ils sont parcourus avec un lecteur d'écran on rencontre successivement les boutons 'like', 'add to watch later', 'share', 'play', 'volume', HD, 'Full screen'.

C'est dommage que le bouton Play arrive en quatrième position. Lors de la tabulation il se trouve en premier. La différence est causée par l'utilisation de tabindex. Les boutons ne sont pas dans l'ordre logique dans le code source et les attributs tabindex sont utilisés pour corriger l'ordre de tabulation. Un utilisateur de lecteur d'écran qui parcourt la page de manière linéaire (flèches haute et bas) ne bénéficie pas de cette adaptation. Ce serait mieux de mettre les boutons dans un ordre logique dans le code source.

Un problème plus sérieux est la disparition des boutons de contrôle. Après quelques secondes les boutons disparaissent et il n'est pas possible de les retrouver. Ils sont cachés de manière à n'être vus par personne, même pas les lecteurs d'écran. Une solution pourrait être de les cacher 'visuellement' de manière à ce qu'ils restent visibles par les lecteurs d'écran.

Sous-titrage

Il est possible d'ajouter des sous-titres. Les formats de sous-titres supportés sont SRT, WebVTT, DFXP/TTML, SCC, et SAMI.

Lors de l'ajout de sous-titres on peut indiquer s'il s'agit de sous-titres pour personnes sourdes et malentendantes (Captions) ou de simples sous-titres (subtitles).

spécification de la langue et du type de sous-titres dans Viméo

Lorsqu'une vidéo est pourvue de sous-titres, un bouton 'CC' apparaît automatiquement dans le lecteur vidéo. Il affiche un menu déroulant qui propose les différents sous-titrages disponibles. Les sous-titres pour sourds et malentendants sont identifiés au moyen de CC dans la liste .

menu de sélection de sous-titres, 2 choix: 'None' et 'Nederlands CC'

Vimeo ne propose pas de sous-titrage automatique ni d'outil pour créer des sous-titres. Il faut créer les sous-titres en utilisant un des nombreux outils disponibles.

Conclusion

La nouvelle version HTML5 du lecteur Vimeo présente plusieurs améliorations par rapport à l'ancienne version en Flash

  • Possibilité d'ajouter des sous-titres
  • Possibilité de naviguer au clavier
  • Boutons de contrôle nommés

Malgré toutes ces améliorations le lecteur vidéo n'est pas encore tout à fait accessible. Nous recommandons de ne pas intégrer des vidéos uniquement au moyen du code d'intégration proposé par Vimeo car :

  • Il y a encore plusieurs environnements dans lesquels c'est la version Flash (inaccessible au clavier et avec lecteur d'écran) qui sera utilisée.
  • La disparition des boutons de contrôle dans le lecteur HTML5 est un problème pour les utilisateurs de lecteur d'écran.

Si vous voulez héberger vos vidéos chez Vimeo et les proposer dans un format accessible, il faut compenser ces problèmes. Pour cela, vous pouvez utiliser Vimeo, et ajouter des boutons de contrôle externes en utilisant l'API Javascript, ou encapsuler le lecteur vidéo dans un autre lecteur vidéo accessible, comme celui de Nomensa, pour les présenter sur votre site.

Réagissez

Les balises HTML suivantes sont autorisées: <a> <b> <ul> <li>