Cela dit, ces contenus présentent un double défi pour nous, développeurs :
Premièrement, quid des populations n’ayant pas accès à une connexion Internet de qualité suffisante ? Quelles solutions avons-nous pour rendre ce contenu intelligible par tous ?
Deuxièmement, comment rendre ce contenu compréhensible aux personnes utilisant des technologies d'assistance ?
Bouclez votre ceinture, on attaque notre dernier chapitre concernant la structure et le contenu des pages.
Rendez vos contenus multimédia compréhensibles par tous
Avant de vous faire découvrir les techniques vous permettant de rendre accessibles vos contenus audio et vidéo, voici un bref rappel des populations qui vont bénéficier de cette amélioration.
Vous allez donc avoir les populations :
malvoyantes ou utilisant des technologies d'assistance, telles que des screen readers ;
sourdes et malentendantes ;
ayant des problèmes de motricité. On peut, par exemple, penser à des personnes ayant eu un AVC, un accident ou ayant un handicap moteur ;
ne comprenant pas la langue utilisée dans les vidéos.
La bonne nouvelle pour nous, développeurs, est que rendre nos contenus audio et vidéo accessibles à tous ne demande pas tant de travail qu’on pourrait le croire.
Adaptez vos contenus audio et vidéo
La balise audio
La principale chose à avoir en tête avec le format audio est de proposer des formats compatibles avec tous les navigateurs. Pensez donc à avoir les formats Ogg (pour Firefox et Chrome) et ACC/MP3 (pour Internet Explorer et Safari).
La balise vidéo
La balise source vous permet de proposer plusieurs encodages possibles en fonction des navigateurs.
Quant à la balise track , elle vous permet de définir les sous-titres possibles pour votre vidéo.
Comme vous pouvez le voir dans l’exemple ci-dessous, cette balise va vous permettre de définir les sous-titres et la langue de ces derniers pour vos visiteurs.
<!-- Un exemple simple -->
<video src="fichiervideo.webm" autoplay poster="vignette.jpg">
Votre navigateur ne permet pas de lire les vidéos.
Mais vous pouvez toujours
<a href="fichiervideo.webm">la télécharger</a> !
</video>
<!-- Une vidéo avec des sous-titres -->
<video src="toto.webm">
<track kind="subtitles" src="toto.en.vtt" srclang="en"
label="Anglais">
<track kind="subtitles" src="toto.sv.vtt" srclang="sv"
label="Suédois">
</video>De plus, l’attribut controls est lui aussi essentiel pour que vos utilisateurs puissent garder le contrôle sur la vidéo (et éviter, par exemple, des crises d'épilepsie).
Pour finir, pensez à ajouter un fichier de transcription si vous utilisez la balise audio . Cela permettra à l’ensemble de vos utilisateurs de comprendre le sens du contenu.
Les limites de la balise vidéo
Bien que les balises video et audio offrent un début de solution, elles ne sont, à l’heure actuelle, pas parfaites d’un point de vue de l’accessibilité, puisque :
les contrôles, le rendu visuel et les raccourcis claviers ne sont pas uniformisés sur l’ensemble des navigateurs.
En effet, l'implémentation de la vidéo est réalisée par le navigateur et non une librairie tierce. Les différents navigateurs ont des visuels et des contrôles différents ;
tous les contrôles nécessaires à une démarche d’accessibilité ne sont pas présents naturellement.
Certains navigateurs n’ont pas de raccourcis claviers pour contrôler le contenu audio ou vidéo, par exemple pour couper le son, ralentir la vidéo ou la mettre en pause.
Avant de terminer ce chapitre, voyons quelques solutions tierces pour intégrer vos contenus audio et vidéo.
Quelques exemples d’outils et de librairies
Pour créer un contenu vidéo ou audio 100 % accessible, vous avez deux solutions :
soit vous créez cet outil à la main, moyennant un peu de JavaScript et l’utilisation des ARIA pour indiquer des états ;
soit vous pouvez passer par une librairie tierce qui va s’occuper de gérer cette problématique pour vous.
Si créer un outil à la main est une bonne idée d’un point de vue apprentissage, quand vous êtes en entreprise, vous passerez parfois par une librairie tierce pour réaliser cette tâche.
Il vous faut trouver un équilibre entre les librairies essentielles et celles qui ne le sont pas.
Voici une sélection de librairies possibles :
Plyr – c’est ma librairie préférée. Elle est compatible avec de nombreux formats, est accessible, customisable, et on peut l’utiliser avec React.
En résumé
Il est important de prévoir, tant pour l’audio que pour la vidéo, des fichiers sources de différents formats (pour gérer la compatibilité entre les navigateurs).
Les contenus audio et vidéo doivent avoir des transcriptions. Les vidéos doivent aussi avoir des sous-titres. Vous pouvez utiliser le format WebVTT pour ça.
Cela dit, la meilleure option reste de passer par des librairies tierces telles que Plyr.
Nous avons à présent terminé cette première partie. Une fois le quiz réalisé, nous verrons dans une deuxième partie les interactions, ainsi qu’une partie dédiée au CSS et à l’accessibilité.
