Les vidéos et contenus audio publiés sur le site peuvent-ils être contrôlés au clavier — lecture, pause, volume, sous-titres — sans avoir besoin d'une souris ?
Critère officiel 4.11 — La consultation de chaque média temporel est-elle, si nécessaire, contrôlable par le clavier et tout dispositif de pointage ?
Pourquoi c'est important
Une personne qui ne peut pas utiliser une souris — en raison d'un handicap moteur ou parce qu'elle navigue au clavier uniquement — doit pouvoir contrôler un lecteur vidéo entièrement au clavier. Sans cela, elle ne peut ni lancer, ni mettre en pause, ni accéder aux sous-titres.
Exemples concrets
Ce qui est conforme
Le lecteur vidéo intégré à la page des séances du conseil municipal peut être entièrement contrôlé au clavier : la touche Espace lance et met en pause, les flèches avancent et reculent, Tab permet d'accéder aux boutons de sous-titres et de volume.
Ce qui pose problème
Le lecteur vidéo du site utilise des contrôles en Flash ou en JavaScript qui ne répondent pas au clavier. Une personne qui navigue au clavier ne peut pas lancer la vidéo.
Comment agir
Pour les vidéos YouTube intégrées, le lecteur natif YouTube est accessible au clavier — pas d'action requise. Pour les autres lecteurs vidéo (plugins WordPress, lecteurs custom), vérifiez avec votre prestataire qu'ils sont compatibles avec la navigation clavier. Un test simple : essayez de contrôler le lecteur sans jamais toucher la souris.
Règles clés
- Le lecteur natif HTML5 (<video controls>) est accessible par défaut — à privilégier.
- Pour un lecteur custom : tous les contrôles doivent être des <button> focusables répondant au clavier.
- Les lecteurs YouTube et Vimeo embarqués sont accessibles au clavier nativement.
Erreurs fréquentes
- Lecteur custom avec boutons <div> non focusables
- Barre de progression non contrôlable au clavier
- Bouton sourdine/volume non accessible
Exemples de code
contrôles custom non accessibles
✗ Non conforme<div class="player">
<video src="film.mp4" id="v"></video>
<div onclick="play()">▶</div>
<div onclick="pause()">⏸</div>
</div>Les <div> ne sont pas focusables. L'utilisateur ne peut pas lancer ni mettre en pause sans souris.
lecteur natif HTML5
✓ Conforme<video controls src="film.mp4"
aria-label="Film de présentation">
<track kind="subtitles" src="st.vtt"
srclang="fr" label="Français" default>
</video>L'attribut controls active les contrôles natifs du navigateur — tous accessibles au clavier nativement.
Référence WCAG : 2.1.1, 2.1.2