# Rendre accessible un lecteur vidéo personnalisé avec des contrôles clavier

> Le client voulait un lecteur vidéo sur mesure, plus élégant que les contrôles natifs du navigateur. Voici comment nous l'avons rendu entièrement pilotable au clavier, étape par étape.

- Auteur : Clément Hadrot
- Publié le : 2022-08-04
- Mis à jour le : 2022-08-04
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/lecteur-video-personnalise-controles-clavier/

## L’essentiel

- Chaque bouton personnalisé doit redevenir un vrai bouton focusable
- Les raccourcis clavier doivent rester prévisibles, pas exotiques
- Le focus visible ne doit jamais disparaître pendant la lecture

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

> L'essentiel à retenir : Chaque bouton personnalisé doit redevenir un vrai bouton focusable ; Les raccourcis clavier doivent rester prévisibles, pas exotiques ; Le focus visible ne doit jamais disparaître pendant la lecture

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.