Pour de nombreux utilisateurs, la navigation web dépend d’un clavier plutôt que d’une souris. Les personnes avec des handicaps moteurs, une déficience visuelle ou une blessure temporaire vivent cette réalité au quotidien.
Rendre un site internet utilisable sans souris relève aujourd’hui d’une exigence réglementaire et technique. La réglementation et le RGAA imposent des adaptations concrètes pour la navigation clavier et l’accessibilité numérique.
A retenir :
- Navigation clavier complète pour tous les éléments interactifs du site
- Ordre de tabulation logique correspondant au flux visuel attendu
- Indicateur de focus visible et cohérent entre navigateurs et dispositifs
- Piégeage de focus pour modales et restauration du focus à la fermeture
Navigation clavier et ordre de tabulation pour un site internet accessible
Suite aux points essentiels, le bon ordre de tabulation devient la colonne vertébrale de la navigation clavier. La structure DOM doit refléter l’ordre visuel plutôt que la mise en page CSS, afin d’éviter de perdre les utilisateurs en cours de navigation. Ce réglage évite les erreurs d’ergonomie web et facilite la gestion des indicateurs de focus.
Problème
Cause
Solution recommandée
Ordre de tabulation incohérent
DOM désordonné par rapport à l’affichage visuel
Reordonner le DOM et utiliser CSS Grid ou Flexbox
Indicateur de focus supprimé
outline:none sans alternative visible
Fournir styles :focus-visible ou équivalent personnalisé
Modales sans piégeage de focus
Absence de FocusTrap et restauration du focus
Implémenter un piège de focus et restaurer le focus
Composants personnalisés non focalisables
Utilisation de div/span sans tabindex
Ajouter tabindex= »0″, handlers clavier et ARIA appropriés
Selon W3C, l’utilisation d’éléments HTML sémantiques simplifie la navigabilité pour les utilisateurs clavier. Privilégier <button>, <a> et les contrôles de formulaire réduit le travail d’adaptation et les besoins d’ARIA.
Bonnes pratiques DOM :
- Placer le logo et la navigation avant le contenu principal
- Utiliser tabindex= »0″ pour éléments interactifs personnalisés et gérables au clavier
- Éviter tabindex positif et préférer l’ordre naturel du DOM
- Tester en désactivant la souris et en suivant la navigation Tab
« J’ai découvert plusieurs éléments non focalisables lors d’un audit clavier de notre intranet. »
Prénom N.
La vidéo ci-dessus illustre des exemples concrets de mise en place de l’ordre DOM et de tests clavier manuels. Ces démonstrations accélèrent la correction des problèmes détectés sur un site internet.
Indicateur de focus et interactions clavier pour l’accessibilité web
L’ordre de tabulation prépare la visibilité des indicateurs de focus sur chaque élément focalisable. Des styles de focus bien pensés évitent le décrochage visuel et améliorent l’ergonomie web pour tous les utilisateurs. Ce point est essentiel avant d’aborder les modales et composants complexes.
Styles de focus visibles pour interactions clavier cohérentes
Cette partie détaille l’importance des règles CSS et des pseudo-classes pour le focus. La pseudo-classe :focus-visible permet d’afficher l’indicateur uniquement lors de la navigation clavier, améliorant ainsi l’expérience pour tous. Selon MDN, l’usage de :focus-visible offre un bon équilibre entre visibilité et esthétique.
Technique
Avantages
Limites
outline:none sans remplacement
Apparence épurée
Perte totale d’indicateur sans alternative
:focus-visible
Indicateur uniquement pour navigation clavier
Support variable sur anciens navigateurs
box-shadow accessible
Contraste visuel élevé
Risque de chevauchement si mal utilisé
outline + outline-offset
Simplicité et compatibilité
Apparence native parfois insuffisante
L’audit des styles de focus doit inclure des tests sur plusieurs navigateurs et modes d’entrée pour valider la cohérence. Selon RGAA, la visibilité du focus constitue un critère fondamental de conformité aux normes accessibilité.
Styles focus recommandés :
- Utiliser :focus-visible pour différencier navigation clavier et souris
- Contraste d’au moins 4,5:1 pour l’indicateur de focus
- Outline-offset pour éviter chevauchement avec le contenu voisin
- Tester avec lecteur d’écran et sans souris pour valider l’expérience
« Ce projet a permis à l’équipe de produire une interface réellement utilisable au clavier. »
Prénom N.
La vidéo précédente montre des comparaisons de styles et des méthodes de test pour différents navigateurs. Ces démonstrations aident l’équipe produit à choisir des styles conformes et robustes.
Piégeage de focus, modales et composants complexes pour navigation accessible
Après avoir sécurisé les indicateurs, il faut garantir que les modales ne bloquent jamais l’utilisateur clavier sans issue. La bonne gestion du piégeage de focus et la restauration du focus sont primordiales pour l’accessibilité web. Ces pratiques sont détaillées ensuite dans des ressources et références vérifiables.
Piégeage de focus pour modales et restauration du focus
La gestion du piégeage de focus empêche l’utilisateur clavier d’être bloqué hors du dialogue. Implémenter un objet FocusTrap robuste et restaurer le focus à l’élément initiateur permet un parcours prévisible. Selon W3C, la restauration du focus améliore nettement l’utilisabilité pour les utilisateurs de lecteurs d’écran.
Checklist tests clavier :
- Piéger le focus à l’ouverture et limiter la navigation au dialogue
- Permettre fermeture par Escape et boutons clairement focalisables
- Restaurer le focus sur l’élément qui a déclenché la modale
- Tester le flux avec Tab et Shift+Tab pour valider le piège
« J’ai implémenté un FocusTrap et cela a réduit les appels au support technique. »
Prénom N.
Navigation clavier pour dropdowns et tableaux de données
Les dropdowns et tableaux nécessitent des comportements clavier précis pour garantir une navigation accessible et fluide. La technique du roving tabindex permet la navigation cellule par cellule au clavier, tout en maintenant un focus clair. Selon RGAA, les tableaux accessibles doivent offrir des raccourcis clavier et une gestion du focus explicite.
Checklist tests clavier :
- Parcourir toute l’interface avec Tab sans éléments inaccessibles
- Vérifier piège de focus dans modales et restauration correcte du focus
- Contrôler navigation dans tableaux avec flèches et roving tabindex
- Tester sur Chrome Firefox Safari Edge et avec lecteur d’écran
« L’accessibilité clavier n’est pas optionnelle ; elle améliore l’efficacité pour tous. »
Prénom N.
Source : W3C, « Principles of accessible user interfaces », W3C, 2020 ; Gouvernement français, « Référentiel Général d’Amélioration de l’Accessibilité (RGAA) », 2025 ; MDN contributors, « Accessibilité au clavier », MDN Web Docs, 2024.