Table des matières
A – AA – AAA
Durée : 8 minutes
A vous de tester le clavier !
Principe
Pouvoir parcourir tout le module au clavier, dans un ordre logique et avec un focus visible, est une base de l’accessibilité numérique.
Cela assure à chacun, y compris aux utilisateurs d’aides techniques, une expérience fluide et prévisible, sans recours à la souris.
Explication audio (transcription disponible)
Transcription
Tester la navigation au clavier, c’est vraiment la base de l’accessibilité numérique.
C’est un prérequis pour tous les points d’accessibilité liés aux handicaps moteurs, mais aussi indispensable pour les utilisateurs en situation de handicap visuel, qui naviguent uniquement sans souris.
Il s’agit de vérifier que tout le contenu essentiel est accessible, que l’ordre de tabulation est logique, et que le focus reste toujours visible.
Pour le concepteur, il est important de tester en conditions réelles, de respecter les standards, et d’indiquer clairement tout comportement particulier.
À vérifier
- Permettre l’accès à tous les contenus et interactions essentiels au clavier (TAB, Entrée, etc.).
- Respecter un ordre de tabulation logique qui suit la structure du contenu affiché.
- Rendre chaque élément en focus clairement visible (contour, ombre, surbrillance…).
- Éviter que du contenu ne masque ou ne gêne l’indicateur de focus lors de la navigation clavier.
- Limiter la navigation clavier aux contenus d’une modale (pop-up, boîte de dialogue) tant qu’elle est ouverte, afin d’empêcher l’accès aux éléments situés en arrière-plan.
Pour qui ?
- Utilisateurs en situation de handicap moteur, personnes utilisant un clavier ou un dispositif alternatif.
- Toute personne préférant naviguer sans souris ou en situation de mobilité.
Pourquoi c’est important ?
Une navigation clavier bien pensée est indispensable à l’accessibilité. Elle garantit l’autonomie de l’utilisateur, évite les pièges et assure que tout le monde peut suivre l’information, même sans souris.
Comment réussir
- Testez la navigation au clavier sur tout le module, de la première à la dernière étape.
- Vérifiez que le focus est toujours visible : idéalement un contour d’au moins 2 px et contraste suffisant (critère AAA recommandé).
- Privilégiez l’utilisation de boutons “désactivés” (grisés) plutôt que “masqués” lorsque l’action n’est pas encore possible. Le bouton reste visible, non accessible au clavier, et clairement annoncé comme “désactivé” par les lecteurs d’écran (alors qu’un élément masqué n’est plus perceptible).
- Gestion du focus dans une modale
- Limitez la navigation clavier à la modale : empêcher l’utilisateur d’atteindre les éléments en arrière-plan tant que la modale (pop-up, boîte de dialogue) est ouverte (exemple Storyline : cocher « Présenter comme boîte de dialogue » ou « Empêcher l’utilisateur de cliquer sur les autres calques »).
- Placez le focus sur un élément pertinent : à l’ouverture, mettre le focus sur le premier élément interactif ou pertinent pour guider l’utilisateur. Ce comportement est souvent automatisé (dans Storyline, il peut être déclenché via la boîte de dialogue native ou le déclencheur « Mise au point »).
- Vérifier la navigation sur plusieurs écrans et dispositifs (PC, tablette, etc.), et avec différents navigateurs si possible.
- Respectez les recommandations des autres points (structure, intitulés, arborescence…), car la navigation clavier dépend de l’ensemble de la conception.
Repères pratiques : navigation clavier et focus
Raccourcis clavier essentiels
| Action | Raccourci clavier |
|---|---|
| Avancer (élément suivant) | Tab |
| Reculer (élément précédent) | Maj + Tab |
| Activer / Cocher / Valider | Entrée / Espace |
| Naviguer dans listes, menus, radios | Flèches |
| Fermer une modale, menu, champ | Échap |
| Cocher / Décocher une case à cocher | Espace |
| Sélectionner un bouton radio | Espace (1er), Flèches |
| Sélectionner une option (liste déroulante) | Espace/Entrée + Flèches |
C’est quoi, le focus ?
Quand un élément est “focusé”, il est actif, prêt à être utilisé, et visuellement mis en évidence à l’écran (contour, surbrillance…).
Principe du focus
Le focus, c’est le repère visuel et fonctionnel qui indique où l’on se trouve dans la navigation au clavier. Sans focus visible, impossible de savoir sur quoi on agit !
Le focus doit toujours être visible et jamais perdu, même lors de l’ouverture d’une modale (popup, boites de dialogue) ou d’un menu.
Comportement dans les outils
Dans la plupart des outils, la gestion du focus visuel est automatique et géré par l’outil. Par exemple dans Rise360 un encadré noir entoure l’élément interactif au focus.
Il faut toujours vérifier :
- Qu’aucun contenu flottant ne gêne le repère du focus.
- Que le contour ou la surbrillance est bien visible (couleur, épaisseur, contraste…).
- Que le focus ne « disparaît » pas dans certains cas (exemples : modale, menu personnalisé, ou effet graphique qui masque le contour).
Ordre du focus selon les outils
L’ordre du focus détermine dans quel ordre chaque élément d’un module (texte, titre, bouton, lien, champ, etc.) va être parcouru par les utilisateurs utilisant un clavier, un lecteur d’écran ou une autre aide technique.
Un ordre de focus logique et cohérent permet de suivre la structure du contenu, que ce soit pour lire, comprendre ou interagir.
Contenu web standard (site, LMS, Rise360…)
L’ordre de tabulation suit naturellement la structure du contenu (titres, paragraphes, boutons…). Si la page est bien structurée, il n’y a rien à configurer : la navigation se fait dans un ordre naturel et logique.
Outils avancés (Storyline, Adobe Captivate, etc.)
Ici, l’ordre du focus doit être vérifié et souvent personnalisé. Les éléments sont positionnés librement sur la diapositive, ce qui peut générer un ordre de tabulation incohérent ou illogique.
Storyline permet de régler précisément l’ordre de tabulation pour chaque écran.
- Ouvrez le panneau Ordre du focus pour chaque écran.
- Vérifiez et modifiez la liste pour que les éléments apparaissent dans un ordre logique sur la diapositive principale et également dans les calques (de haut en bas).
- Vous devez supprimer du focus les éléments purement décoratifs ou inutiles (background, images, etc.).
- Vérifiez après chaque ajout ou déplacement d’élément, surtout en cas de duplication de slides.
Astuce Genially : activer le mode Designer
Sur Genially, vous devez activer le mode Designer pour faire apparaître le gestionnaire de calques (Menu > Préférences > Show). Celui-ci vous permettra d’ordonner les éléments (de haut en bas). Laissez les éléments décoratifs sans texte alternatif.
Réalité d’usage : diversité des besoins côté handicap moteur
Pour beaucoup de personnes en situation de handicap moteur, la formation à distance est une opportunité majeure d’accès et d’autonomie. Mais si la navigation clavier n’est pas fluide et complète, cette opportunité peut vite devenir inaccessible.
Une grande diversité de situations
Les situations de handicap moteur peuvent être très différentes :
- Personnes en fauteuil roulant, avec ou sans limitation de l’usage des mains.
- Personnes ayant perdu en précision, en force ou en endurance après un accident ou une maladie (AVC, sclérose en plaques, etc.).
- Utilisateurs d’aides techniques spécifiques (trackball, joystick, contacteur, pointeur oculaire, commande vocale).
- Personnes avec une limitation temporaire (fracture, tendinite sévère, etc.).
Différences d’usage
Ces publics n’utilisent pas tous le clavier de la même façon :
- Certains naviguent presque exclusivement au clavier ou via des dispositifs qui envoient des commandes clavier.
- D’autres utilisent encore la souris, mais avec des gestes plus lents ou limités, ce qui rend certaines manipulations complexes ou fatigantes.
Exemple concret : sur ce site, deux activités de glisser-déposer sont accessibles au clavier. Elles peuvent être plus fatigantes pour certaines personnes qui utilisent surtout la souris avec des gestes limités ; c’est pourquoi une option permet de valider directement la réponse sans faire l’exercice. L’activité sera certainement améliorée pour la rendre plus confortable pour tous.
En bref : Comment tester la navigation clavier ?
- Naviguez sur le module sans souris.
- Le focus est-il visible à chaque étape ?
- Peut-on atteindre et utiliser tous les éléments interactifs au clavier ?
- Tous les types d’activités sont-ils accessibles ? (voir fiche 16. Activité accessible sans souris)
- L’ordre de tabulation du clavier est-il logique et ordonné ?
- Peut-on sortir facilement des modales ?
Suivre ma progression :
Ce point est lu & terminé.