Le point sur les players audio/vidéo HTML5 et l'accessibilité

J'ai bien envie de remettre en ligne mes bonnes vieilles compositions musicales datant de l'ancien site, ou du moins, les plus réussies. C'est alors que m'est revenue tout naturellement la question des lecteurs directement intégrés sur les pages web, et leur accessibilité, au demeurant relativement décevante en règle générale.

A mort flash !

Tout d'abord, il n'est pas question de revenir à ces antiques players flash tout pourris. Flash c'est lourd, ça n'a jamais été accessible, et c'est gentiment en train de disparaître grâce aux smartphones qui ne sont volontairement plus compatibles (une bonne nouvelle, merci apple). En plus, selon plusieurs sources expertes, le plugin flash des navigateurs est régulièrement le vecteur de propagation n°1 de toutes sortes de virus et d'autres attaques en tous genres, essentiellement parce qu'il est extrêmement populaire. Il faudrait donc se tourner vers les lecteurs HTML5, mais du point de vue de l'accessibilité, en règle générale, ce n'est hélas qu'à peine mieux.

Les contrôles par défaut ne sont pas accessibles

Les balises <audio> et <video> ont prévu un attribut controls, qui indique au navigateur qu'il doit fournir des contrôles par défaut. Ces contrôles permettent normalement au moins de lancer/arrêter la lecture, avancer/reculer dans le clip et ajuster le volume.

On pourrait espérer que ces contrôles soient accessibles, puisqu'ils sont gérés et fournis par le navigateur. Que nenni !

En utilisant un lecteur d'écran comme jaws ou NVDA, il en ressort les observations suivantes si on laisse les contrôles par défaut :

Javascript à la rescousse

Les contrôles par défaut ne sont pas accessibles, et ils doivent sûrement être relativement laids. Deux bonnes raisons pour ne pas les utiliser, mais du coup il faut appeler javascript à la rescousse.

Mauvaise nouvelle. les scripts qu'on voit partout et les vidéos intégrés en HTML5 de youtube par exemple ne sont pas terriblement accessibles. C'est toujours mieux que flash ou les contrôles par défaut des navigateurs, mais ce n'est quand même pas encore ça.

Avec le player qu'on voit partout et qui vient de youtube, on a un bouton pour lancer/arrêter la vidéo, on voit la position actuelle et la durée totale, mais pas moyen de naviguer de manière fiable malgré que le slider est pourtant le plus souvent visible. Des fois ça marche, des fois ça ne marche pas, la plupart du temps ça ne marche pas. Pour le volume c'est pareil, on voit parfois un slider, mais il ne fonctionne que très rarement.

Par contre, je suis « déçu en bien » sur un point précis concernant youtube. Un ami m'a dernièrement pointé une vidéo dans laquelle jaws lit automatiquement les sous-titres en temps réel. A essayer avec IE10+ ou firefox.
Lien vers la vidéo: http://www.youtube.com/user/swisscom
Ne vous attardez pas sur le contenu de cette vidéo, c'est une publicité pour l'opérateur n°1 en Suisse. Le contenu importe peu, mais l'idée des sous-titres lus automatiquement est plutôt intéressante et bien menée.

Mais bon, il n'empêche que les fonctionnalités de base ne sont pas encore vraiment accessibles; les sous-titres lus automatiquement c'est cool, mais c'est un gadget bonus à rajouter quand tout le reste fonctionne, pas avant.

Le bug surprise

En plus, pour ne pas arranger les choses, il y a un bug fort étrange avec jaws et Internet Explorer. Il arrive régulièrement, mais pas systématiquement, que les quelques premières lettres du texte qui suit immédiatement <audio> ou <video> soient doublées. Par exemple avec IE9 et jaws 14, le bouton pour lancer la lecture d'une vidéo youtube s'intitule souvent "LLire", "LiLire" ou "PlPlay", tout comme on voit aussi parfois "TTélécharger".

Si ce n'était qu'une ou deux lettres, ça ne serait pas trop grave. Mais le souci, c'est que ça provoque des incohérences dans le rendu virtuel de la page, comme le fait d'appuyer sur enter pour cliquer sur un bouton et en fait on a cliqué sur le bouton voisin. Plutôt idiot et gênant...

Constatations finales sur l'accessibilité

Tout ça pour en arriver au final à la constatation que je n'ai vu jusqu'à ce jour encore aucun player HTML5 qui a vraiment suivi la démarche accessibilité jusqu'à la fin. Si on peut lancer et arrêter les clips c'est déjà bien et toujours mieux que ces antiques players flash où une fois sur deux le seul moyen d'arrêter une vidéo était de fermer la page, mais deux fonctionnalités à mon sens essentielles demeurent toujours inaccessibles: régler le volume, et avancer/reculer dans le clip.

Et pourtant, avec javascript, il y a moyen de faire quelque chose de bien. Le coup des sous-titres en témoigne ! J'en arrive toujours à la même conclusion concernant javascript: les moyens pour faire des choses accessibles sont là, mais personne ne semble savoir les utiliser correctement de A à Z, il y a toujours quelque chose qui manque quelque part.

Ma modeste contribution

Déçu de trouver aucun lecteur HTML5 me convainquant totalement, j'ai décidé comme d'habitude de faire autrement que les autres et de programmer mon propre player. Regardez comment il est fait si vous en avez envie, vous avez un exemple avec une de mes musiques plus bas sur cette page.

Évidemment, comme toujours avec moi, il doit sûrement être très moche; comme d'habitude ici, le design est en option. Je vous laisse le soin de l'embellir graphiquement sans altérer le code HTML et Javascript, si ça vous dit.

Voici un exemple du player avec une de mes musiques MIDI :


Quand on place le focus sur une des deux zones, on peut :

J'ai testé ce player avec

Avec IE9, ça fonctionne aussi, au détail près que les sliders sont remplacés par des zones de texte. IE8 ne supporte pas du tout <audio> et <video>, ça vous fera une raison de plus pour lâcher windows XP si ce n'est pas encore fait.

Pour télécharger le code source du script javascript:
Télécharger mmctls1.0.js, 7 Ko (6838 téléchargements)

Pour l'utiliser, rien à faire du côté du HTML, si ce n'est mettre un <audio> ou <video> normal et d'attribuer un id à l'élément . Les contrôles se placent automatiquement et directement à la suite :


<audio id="audio1">
<source src="truc.mp3" />
<source src="truc.ogg" />
</audio>

J'espère que vous trouverez ça utile, n'hésitez pas à faire part de vos suggestions dans les commentaires.

Un autre frein à l'adoption de l'audio/vidéo en HTML5: tous les navigateurs ne supportent pas tous les formats

Avant de terminer cet article, j'aimerais bien parler d'un autre problème qu'ont les players HTML5 aujourd'hui, et qui n'a rien à voir avec l'accessibilité. Je fais cette appartée parce que je trouve que ça peut être tout aussi gênant. Avez-vous déjà remarqué que certaines vidéos de youtube ne fonctionnent que sur IE, et d'autres que sur firefox ?

Si j'ai bien compris le feuilleton des formats depuis le début, en gros, on a deux camps: Microsoft et Apple d'un côté, Mozilla et Google de l'autre. Du côté Microsoft/Apple, on supporte MP3 pour l'audio et MP4 pour la vidéo, mais on refuse catégoriquement de supporter OGG, pour je ne sais quelle raison obscure. Du côté Mozilla et Google, c'est l'inverse: on supporte OGG, mais on ne veut pas entendre parler de MP3 et MP4 parce que ce n'est pas des formats libres. Et personne ne veut mettre de l'eau dans son vin.

Au final, le diffuseur est de toute manière obligé de fournir son contenu dans deux formats différents: un gâchis de temps, d'espace disque et de mémoire totalement ridicule, à l'heure où on entend de plus en plus parler d'écologie ! ET celui qui ne connaît pas cette particularité embarassante et qui ne fournit son contenu que dans un seul format se coupe directement de la moitié du monde...

Malheureusement, ce problème aurait tendance à ralentir la progression d'HTML5 et de favoriser la résistance de flash. On est en décembre, c'est le moment d'exprimer quelques souhaits pour 2014: j'aimerais bien que Microsoft et Apple revoient un peu leur copie et ajoutent le support d'OGG. Quant à firefox, il existe des bibliothèques libres capables de lire le MP3 et le MP4, FFMPEG par exemple, pourquoi ils n'ont pas encore songé à les utiliser ?

Conclusion

Comme d'habitude, j'espère que cet article vous a été utile et qu'il vous a appris des choses. Et faites bon usage de mon player HTML5. Vous ne devriez plus avoir d'excuse pour mettre de l'audio et de la vidéo accessibles sur vos pages web maintenant.

Commentaires

1. aria kana zana, 05.12.2013 15:34:54

salut Quentin ,
d'abord mmerci pour tout tes articles !
sinon, je ne suis pas tout à fait d'accord avec toi en ce qui concerne youtube, puisque qu'avec IE, c'est très accessible :
en fait, tout est accessible mise à part la lecture des sous titres ....
revoici le mail que j'avais envoyé sur prog liste ...
1.après avoir lancer la vidéo, appuyer sur o, tabuler (pour donner le focus
)
2.insert +z pour passer en mode application
3.utiliser maintenant toutes les touches de raccourcis suivants
Les raccourcis clavier de YouTube
A partir de la lecture d’une vidéo sur YouTube, il faut savoir qu’il existe
un certain nombre de raccourcis clavier permettant de contrôler la lecture de
la vidéo ce qui peut s’avérer beaucoup plus précis et pratique que des
manipulations à la souris.
Certains sont utilisables en mode fenêtré et d’autres seulement quand on
est en plein écran. La vidéo peut être intégralement chargée ou encore en cours
de chargement. Selon le navigateur Web utilisé, certains raccourcis ne sont
pas toujours reconnus. Cela dépend aussi du player vidéo de YouTube utilisé
qui existe en Flash ou en HTML5.
En mode fenêtré, il faudra d’abord cliquer sur la fenêtre de la vidéo pour
que le contrôle du clavier se fasse correctement sur la vidéo en cours de
lecture,
pour cela cliquer sur la barre de contrôle.
Liste de 12 éléments
Touche 0 du pavé numérique ou de clavier principal : Début de la vidéo
Touches 1 à 9 du pavé numérique ou de clavier principal : Avancer ou
reculer la vidéo d’un certain pourcentage – 1 = 10%, 2 = 20%, 3 = 30%, 4 = 40%,
5
= 50%, 6 = 60%, 7 = 70%, 8 = 80%, 9 = 90%
Flèches Droite et gauche : Avance ou recule la vidéo de 5 secondes
Ctrl + Flèches Droite et gauche : Avance ou recule la vidéo de 10 secondes
j et l : Recule ou avance d’environ 10% dans la vidéo
Début : Début de la vidéo
Fin : Fin de la vidéo
Espace ou K : Mettre en pause ou reprendre la lecture d’une vidéo
Flèche haute : Monte le volume de 5%
Flèche basse : Baisse le volume de 5%
F : Plein écran
Esc : mode fenêtré (sortie du mode plein écran)
Fin de la liste
avec firefox, pour certaines vidéos les racroucis ne fonctionnnent pas
http://www.ballajack.com/raccourci-clavier-youtube

2. anonyme, 05.12.2013 19:40:49

Je rajouterais que c'est d'une part faux pour le player HTML5. Perso, avec NVDA ou JAWS, sous Firefox, il me suffit de basculer entre le mode formulaire et le mode navigation. Ainsi en mode formulaire, et sur un player HTML5, il est possible de régler le volume ainsi que l'avancement de la lecture ; en utilisant les flèches et CTRL (pour certaines opérations).
Pas testé sous IE, et à vrai dire, je m'en fou !

3. anonyme, 07.12.2013 13:40:39

Merci et Bravo Quentin.
Où là là j'ai mal à la tête avec toutes ces manipulations !
Peu importe qui vous êtes, si vous concevez quelque chose tirez vous les doigts des fesses et réfléchissez à nous pondre des choses accessible compatibles et surtout intuitives.

4. QuentinC, 09.12.2013 10:50:11

@#1:
J'ignorais totalement que youtube proposait des raccourcis clavier.

Pourquoi diable ne communiquent-ils pas du tout sur ce genre de chose ? Je n'ai vu aucune page d'aide nulle part sur le site de youtube où ces raccourcis sont expliqués. C'est bien dommage, j'aurais certainement été moins agressif à leur sujet si j'avais trouvé ça avant.

Quoi qu'il en soit, voilà l'origine de mon « des fois ça marche, des fois ça marche pas ». En fait, pour que les raccourcis indiqués fonctionnent, il faut passer en mode formulaire précisément sur le composant labélésé « 100% volume slider ». Contrairement à son étiquette, il ne permet pas de régler le volume mais d'utiliser tous les raccourcis évoqués. Parfois ce slider n'est pas présent, reste à savoir quand, mais souvent il est là. Si on active le mode formulaire sur un autre élément, ce n'est pas sûr que ça marche en tout cas.

@#3:

réfléchissez à nous pondre des choses accessible compatibles
et surtout intuitives.

Intuitives, je ne peux pas faire mieux je pense. Accessibles ça l'est nécessairement avec les lecteurs d'écran en tout cas, puisque j'ai testé moi-même le truc avec jaws+IE, NVDA+firefox et VO sur iPhone. Par contre pour la compatibilité, je ne peux pas vérifier sur ce dont je ne dispose pas, mais je pense que ça doit aussi très bien fonctionner sur chrome, ou en tout cas je ne vois pas de raison que ça ne fonctionne pas.

5. unkonu², 04.01.2014 13:54:42

salut,
moi j'ai des racourssi qui fonctione sur youtube.

  1. j, recul la vidéo.
  2. k, stop la vidéo.
  3. l, avance la vidéo.

voila et merci a coin coin de nous ffaire se site.
baye

6. unkonu, 04.01.2014 14:00:10

vous pouvez conssulté cette vidéo et voir ssi c'est racourssi fonctionne.
"lien sur youtube"(http://www.youtube.com/watch?v=oiKj0Z_Xnjc)

7. Vivi, 22.11.2014 14:59:49

Bonjour,
Merci, je testerai ton player! Par contre, je suis d'accord avec toi sur le fait que flash player apporte des mauvaises choses sur l'ordi, cependant, pour le bon fonctionnement de certains sites comme voxiweb ou des sites de musique, il le faut. J'ai justement essayé de l'installer il y a quelques moi, j'ai été envahie de pubs. Je l'ai alors désinstallé, mais comme je voulais tester deezer sur voxiweb, je l'ai réinstallé hier soir et là, avec mozilla, jaws plante à chaque coup au bout de quelques minutes. J'ai donc dû le désinstaller à nouveau.
Est-ce que ton player peut remplace flash pour tous les sites web?
Merci de ta réponse.

8. Alain-Ambazac, 06.01.2015 21:58:41

Salut Quentin
je suis en train de faire un site sur lequel se trouveront des parties d'échecs au format mp3 pour des joueurs aveugles. L'idée de départ était de les proposer en téléchargement pour une lecture sur un Victor, mais, vu la complexité de la chose pour certains, le lecteur audio web semble une excellente alternative pour peu que le lecteur audio puisse être maîtrisé.
Que l'on prenne Chrome, ou Firefox, la commande de "rembobinage" fonctionne, mais mal: pour Chrome un appui sur flèche gauche fait remonter de 8 secondes, pour Firefox, le retour est de 15 secondes.
Autant dire que c'est inexploitable dans ce projet.
Ton lecteur tombe donc à pic, merci!
Le javascript serait-il modifiable pour que le retour arrière (et l'avance) soit ramené à de 5 secondes à 2 secondes?
Bravo pour ton article même si j'ai pas tout compris.
Alain

9. ElMatador, 22.02.2015 00:22:52

Alors j'ai bien regarder ton player ci dessus, comment te dire ? j'ai jamais rien vu d'aussi pourris, je pense que tu devrai envisager une reconversion, du genre fonctionnaire... ou un trus du genre ! tu m'as l'air tres gentil mais tres mauvais en code aussi je pense pas que tu face du bien a la communauté, soit gentil (une derniere foi) DEGAGE !

10. Grimm, 22.02.2015 00:26:49

je suis comme Elmatador je crois que tu es mauvais tous simplement donc comme il te le demande change de métier les mecs comme toi ca raconte n'importe quoi les jeunes écoutent toutes ces conneries !

11. QuentinC, 24.02.2015 19:38:11

Vous dites ça parce que vous ne connaissez peut-être pas assez la problématique. Alors certes, visuellement, oui, c'est probablement pourri; mais le graphisme je m'en cogne, du moment que c'est suffisament convenable et utilisable.

Ensuite, il faut dire que depuis un peu plus d'un an, la situation a beaucoup changé. Le support n'est pas encore complet, mais déjà bien meilleur qu'à la date où j'ai écrit cet article, sur Firefox notamment. Youtube aussi s'est un peu amélioré, en plus du fait que j'ignorais alors les raccourcis qu'on m'a signalé dans les commentaires. Personne n'est parfait, on ne peut pas tout savoir et le but d'un site web comme celui-ci est justement de combler ses lacunes en apprenant des autres.

Finalement, c'est toujours très facile de critiquer sans argumenter et sans montrer ce que vous êtes capables de faire vous-mêmes. Alors s'il vous plaît, soit postez un lien vers votre création que je puisse comparer et peut-être apprendre, soit expliquez pourquoi ce que j'ai fait est pourri. La critique gratuite sans argumentation n'a aucune valeur, elle sert juste à rabaisser. En d'autres termes si vous ne vous justifiez pas, c'est peut-être parce que vous aussi vous faites des trucs complètement pourris et vous cherchez juste à vous convaincre que votre voisin fait pire que vous.

12. audreyblabla, 27.04.2018 10:22:48

Bonjour,

je viens redonner un peu d'enthousiasme après ces commentaires de rageux :-)

Ce script est tout simplement parfait :-) Il rend la balise audio HTML5 accessible (full ARIA tout propre), en 100 lignes de pur JavaScript (aucune dépendance à jQuery dieu merci !) .

L'apparence c'est l'affaire d'une autre personne. Quand on est dév on est pas designer, et quand on est dans le métier, on le sait très bien ;-)

Encore bravo pour ton script.
J'y ai juste fait une petite modification sur la gestions des touches (haut/bas et droite/gauche sont chez moi effectives sur les deux sliders, dès qu'ils sont les éléments actifs du DOM). Je m'apprête donc à l'utiliser sur un de nos sites, mais je ne trouve nulle part mention de la licence. Pour l'instant j'ai mis l'url de l'article et du script dans le js. Je pense que ça apparaîtra également dans les mentions légales. Dis moi si tu propose autre chose ?

Encore merci !

Commenter