Accessibilité tech

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

Par Marwa Boussandel, le 26 mars 2021 à 17:46

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.

Téléchargez notre guide pour savoir si vous êtes réellement en conformité

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

Bon à savoir 


Une navigation linéaire pourra être faite sur :

    • tous les éléments
    • seulement les liens
    • seulement les headings
    • seulement les boutons
    • seulement les champs de formulaire
    • seulement les landmarks 

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. 

Exemple vidéo youtube ipedis

Autre exemple vidéo youtube ipedis

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 ...".

 

Bon à savoir


Deux nouvelles versions des WCAG sont en cours d’élaboration : une version 2.2 qui sortira avant le draft 3.0.

En France, la version 4.1 a été publiée en février.

Depuis le Décret de loi 2019-768 sur l’Accessibilité Numérique, les entreprises privées sont dans l’obligation de produire et diffuser sur leur site :

  • Une déclaration d’accessibilité menant à
  • Un schéma pluriannuel contenant
  • Des plans d’action annuels

Télécharger notre guide 6 bonnes pratiques pour être en conformité avec le décret 2019-768

 

Marwa Boussandel

Marwa Boussandel

Diplômée en Master 2 en Informatique et mathématique à l’université de Poitiers, Marwa possède les compétences techniques lui permettant de répondre aux problématiques posées par l’accessibilité numérique. Elle intervient donc en tant que consultante accessibilité numérique senior dans tous les projets web de refonte de site mais aussi en tant que formatrice.

Quels sont les 80 chiffres clés de l'accessibilité numérique en France des sites e-commerce et institutionnel ?

DÉCOUVREZ LES 80 CHIFFRES CLÉS DE L'ACCESSIBILITÉ NUMÉRIQUE EN FRANCE