[Tech] Comment développer un player vidéo e-accessible en 5 étapes ?

Voici le premier épisode de notre dossier spécial développeurs.

Dans cet article, vous retrouverez toutes les recommandations techniques pour créer un lecteur vidéo utilisable par des personnes en situation de handicap.

Comment naviguer sur le web pour une personne en situation de handicap ?

Les personnes non-voyantes ou malvoyantes peuvent utiliser les lecteurs d’écran pour vocaliser le contenu. Sur Desktop, nous retrouvons Jaws et NVDA sur PC, et VoiceOver pour Mac. Sur mobile, TalkBack est présent sur Android et VoiceOver sur iOS.

Les lecteurs d’écran sont des progiciels qui vocalisent le contenu de la page web ou de l’application mobile. Les informations et méta-informations seront ainsi restituées telles que :

• “A l’occasion du 17 mars… “
• “lien”, “visité”, "sélectionné", …

Le focus sera présent et visible pour savoir sur quel élément on se trouve. 

La navigation clavier sera utilisée pour une navigation rapide et efficace à l’aide notamment des touches : 

• Tab : navigation linéaire des liens
• Alt + Tab : navigation en arrière
• Entrée : déclenche les liens et boutons 
• Flèches directionnelles : navigation sur tous les éléments

Mode d’emploi : allons-y pas à pas

Etape 1/ La navigation au clavier

La navigation au clavier et le focus visible doivent être indépendants du lecteur d'écran. Si cela n’est pas le cas, la navigation est moins intuitive. En résumé ; la navigation au clavier avec focus visible doit exister même si le lecteur d'écran n’est pas activé.

Etape 2/ Focus or not focus

Les éléments nativement focusables doivent recevoir un focus, et celui-ci doit être visible :  

• Bouton Play / Pause
• Bouton vidéo suivante 
• Bouton désactiver son
• Volume 
• Bouton SRT
• Barre de lecture - chronologie
• Bouton lecture automatique
• Bouton fullscreen ...

Attention à ce que le focus reste bien visible lorsqu’il est sur la fenêtre de la vidéo. 

Etape 3/ Labelliser intelligemment

Tous les boutons doivent avoir des labels pertinents dans la langue de la vidéo. Exemple pour le bouton play de la video : aria-label= “Lire la vidéo" 

Si vous avez plusieurs vidéos sur une même page, il est alors nécessaire de rendre ces boutons différentiables par leurs labels. L'une des possibilités pour répondre à cette exigence est de concaténer l'action du bouton avec le titre de la vidéo. Par exemple: "Lire la vidéo qu'est ce que le handicap"

Etape 4/ Et pour la version mobile ?

Les mêmes recommandations techniques sont attendues sur mobile. 

La vidéo pourra prendre l’intégralité de l’écran du téléphone, il est donc absolument impératif que tous les boutons soient focusables pour pouvoir retourner sur le site source.

Exemple de player custom qui garde la même interface en desktop et mobile : https://francetvaccess.fr/mfp-access-player/ 

Etape 5/ Fonctionnalités demandées WCAG & RGAA

Afin d'être conformes aux recommandations des WCAG et RGAA, les vidéos publiées en ligne doivent à minima fournir des sous-titres et transcriptions (version HTML ou PDF e-accessible), donc deux fonctionnalités distinctes.

Pour rappel : les sous-titres reprennent les dialogues par écrit et sont insérés dans la vidéo, alors que le transcript est un fichier à part, pouvant apparaître dans un bloc dédié synchronisé au-dessous de la vidéo ou bien dans une page web à part (sans synchronisation).

Ceux-ci doivent être présentés dans la ou les langues de la vidéo. 

Cependant, les sous-titres et les transcriptions peuvent être dans la langue de la page, tant qu'elles indiquent lorsque nécessaire l’information de changement de langue ; exemple : "Traduit de [japonais, italien, anglais, français, allemand] etc ...".