Un client dans le secteur de la formation en ligne souhaitait un lecteur vidéo qui reprenne l’identité visuelle de sa marque plutôt que les contrôles génériques du navigateur : boutons ronds personnalisés, barre de progression fine, menu de vitesse de lecture. Le développement a masqué les contrôles natifs de l’élément <video> avec l’attribut controls retiré, au profit d’une interface entièrement recréée en HTML et JavaScript.
Ce choix esthétique légitime a un coût : il faut recréer, à la main, tout ce que le navigateur offrait gratuitement au clavier. Voici la démarche complète que nous avons suivie pour que ce lecteur reste utilisable sans souris, du premier bouton jusqu’au dernier raccourci.
Étape 1 : partir de vrais éléments <button>
La première version du lecteur, livrée par un sous-traitant, utilisait des <div> avec un gestionnaire de clic pour chaque contrôle : lecture, pause, avance rapide, volume. Aucun de ces éléments n’était focusable ni activable au clavier par défaut. La première correction a consisté à remplacer systématiquement ces <div> par de vrais éléments <button>, qui obtiennent gratuitement le focus au Tab, l’activation à Entrée et à Espace, et un style de focus visible par défaut du navigateur.
Étape 2 : nommer chaque bouton correctement
Les icônes seules ne suffisent pas : un bouton représenté uniquement par un pictogramme de triangle doit annoncer son rôle à un lecteur d’écran via un texte accessible. Nous avons utilisé l’attribut aria-label, mis à jour dynamiquement selon l’état de lecture :
playButton.addEventListener('click', function () {
if (video.paused) {
video.play();
playButton.setAttribute('aria-label', 'Mettre en pause');
} else {
video.pause();
playButton.setAttribute('aria-label', 'Lecture');
}
});Étape 3 : rendre la barre de progression pilotable au clavier
La barre de progression personnalisée a été construite avec le rôle slider, doté des attributs aria-valuemin, aria-valuemax et aria-valuenow mis à jour à chaque avancée de la lecture, ainsi que d’un gestionnaire d’événement clavier pour les flèches gauche et droite :
progressBar.setAttribute('role', 'slider');
progressBar.setAttribute('tabindex', '0');
progressBar.addEventListener('keydown', function (event) {
if (event.key === 'ArrowRight') {
video.currentTime = Math.min(video.currentTime + 5, video.duration);
} else if (event.key === 'ArrowLeft') {
video.currentTime = Math.max(video.currentTime - 5, 0);
}
progressBar.setAttribute('aria-valuenow', Math.round(video.currentTime));
});Étape 4 : le menu de vitesse de lecture
Le sélecteur de vitesse, présenté sous forme de petit menu déroulant, a été construit avec un bouton déclencheur et une liste d’options gérée comme un menu ARIA classique : flèches haut et bas pour naviguer entre les vitesses proposées, Entrée pour valider, Échap pour fermer sans changer de valeur.
Étape 5 : des raccourcis clavier globaux, mais prévisibles
Nous avons ajouté des raccourcis globaux sur le conteneur du lecteur : Espace pour lecture ou pause, flèches gauche et droite pour reculer ou avancer de cinq secondes, flèche haut et bas pour le volume. Ces raccourcis reprennent volontairement les conventions déjà utilisées par YouTube et par le lecteur natif de la plupart des navigateurs, pour ne pas obliger l’utilisateur à apprendre un nouveau système.
- Espace : lecture ou pause
- Flèches gauche/droite : recul ou avance de cinq secondes
- Flèches haut/bas : volume
- M : couper ou rétablir le son
- F : plein écran
Étape 6 : vérifier l’ordre de tabulation complet
Le dernier passage a consisté à parcourir l’intégralité du lecteur uniquement avec la touche Tab, en vérifiant que l’ordre suivait la logique visuelle : lecture, barre de progression, volume, vitesse, plein écran. Un focus visible net, avec un contour de deux pixels bien contrasté, a été ajouté sur chaque contrôle, car le style de focus par défaut avait été supprimé par la feuille de style générale du thème.
Reconstruire un lecteur vidéo sur mesure revient à réécrire, contrôle par contrôle, tout ce que le navigateur offrait gratuitement. Le budget de développement doit intégrer ce temps dès le départ, pas comme une correction de dernière minute.
En résumé
Le lecteur final compte sept contrôles distincts, tous accessibles au clavier et correctement annoncés par NVDA et VoiceOver lors de nos tests. Le travail a représenté environ un quart du temps de développement total du composant, ce qui a surpris le client mais s’est avéré indispensable : un lecteur vidéo qui ne fonctionne qu’à la souris exclut de fait toute personne qui navigue exclusivement au clavier, situation qui concerne aussi bien certains utilisateurs moteurs que des utilisateurs avancés sans aucun handicap particulier.
