La réponse courte

Rangez votre souris et utilisez Tab pour avancer, Maj+Tab pour reculer, Entrée pour suivre les liens et activer les boutons, Espace pour les cases à cocher et les boutons, les flèches dans les menus et Échap pour fermer les fenêtres. Vous devez toujours voir où vous êtes, atteindre tout ce qui est cliquable dans un ordre logique et ne jamais rester coincé.

À retenir

  • Beaucoup de gens naviguent au clavier ou avec un appareil qui agit comme un clavier.
  • Vous devez toujours voir un contour de focus clair.
  • L'ordre doit suivre la lecture visuelle de la page.
  • Les menus, fenêtres et carrousels cachent la plupart des pièges.
  • Ajoutez un lien « Aller au contenu » pour éviter de parcourir le menu à chaque page.

Les outils automatisés sont excellents pour trouver les étiquettes et textes alternatifs manquants, mais seule une personne peut dire si un site est vraiment utilisable sans souris. Les personnes aveugles, celles qui ont des tremblements ou une mobilité réduite, et celles qui préfèrent simplement le clavier en dépendent toutes. Le test prend cinq minutes.

Les touches dont vous avez besoin

  • Tab : lien, bouton ou champ suivant
  • Maj + Tab : précédent
  • Entrée : suivre un lien, activer un bouton, envoyer
  • Espace : activer un bouton, cocher une case, faire défiler
  • Flèches : boutons radio, menus, curseurs, onglets
  • Échap : fermer un menu ou une boîte de dialogue

Sur Mac avec Safari, activez d’abord « Appuyer sur Tab pour mettre en évidence chaque élément d’une page Web » dans les réglages de Safari, sous Avancées.

Le test, étape par étape

  1. Commencez en haut de la page

    Cliquez dans la barre d’adresse, puis appuyez sur Tab. Le premier élément atteint devrait idéalement être un lien « Aller au contenu principal ».

  2. Parcourez tout avec Tab

    Appuyez sur Tab plusieurs fois. Chaque lien, bouton et champ doit recevoir un contour visible, dans un ordre qui suit la lecture de la page.

  3. Utilisez chaque contrôle

    Ouvrez le menu avec Entrée, déplacez-vous avec les flèches ou Tab et fermez-le avec Échap. Cochez les cases avec Espace. Envoyez un formulaire avec Entrée.

  4. Ouvrez et fermez les fenêtres

    Ouvrez une boîte de dialogue ou une bannière de témoins. Le focus doit y entrer, y rester pendant qu’elle est ouverte et revenir au bouton qui l’a ouverte quand vous appuyez sur Échap.

  5. Cherchez les pièges

    Si vous ne pouvez pas sortir avec Tab d’un lecteur vidéo, d’une carte ou d’un widget de clavardage, c’est un piège au clavier (WCAG 2.1.2) et un obstacle sérieux.

  6. Notez et corrigez

    Notez chaque problème avec la page et l’élément. La plupart des corrections sont simples : ajouter un style de focus, utiliser un vrai bouton au lieu d’une div ou corriger l’ordre dans le HTML.

Les quatre problèmes les plus courants et leurs corrections

Aucun focus visible. Quelqu’un a ajouté outline: none pour faire propre. Remettez-le avec un style clair comme :focus-visible { outline: 3px solid #1F4FD8; outline-offset: 2px; }.

Des div cliquables. Une <div onclick> ne peut pas être atteinte avec Tab. Utilisez un vrai <button> pour les actions et <a href> pour les liens. Ils fonctionnent au clavier sans effort.

Un ordre étrange. Des valeurs tabindex positives (1, 2, 3) ou du CSS qui déplace visuellement les éléments peuvent faire sauter le focus. Retirez les tabindex positifs et corrigez l’ordre dans le HTML.

Un focus caché. Un en-tête fixe ou une bannière de témoins recouvre l’élément qui a le focus. Les WCAG 2.2 ont ajouté une règle pour ce cas (2.4.11, Focus non masqué). Ajoutez une marge de défilement : html { scroll-padding-top: 90px; }.

Faites-en une habitude

Refaites ce test chaque fois que vous lancez un nouveau gabarit, menu ou formulaire. Accessible Nord signale les motifs de code qui causent souvent des problèmes au clavier, comme les div cliquables et les tabindex positifs, pour que vous sachiez où regarder d’abord. Pour une vue d’ensemble, lisez comment faire un audit d’accessibilité en un après-midi.

Sources

La plupart des sources sont des documents officiels en anglais.

  1. Understanding WCAG 2.2: Keyboard (2.1.1)
  2. Understanding WCAG 2.2: Focus Visible (2.4.7)
  3. Understanding WCAG 2.2: Focus Not Obscured (Minimum) (2.4.11)
  4. WebAIM: Keyboard accessibility

Dernière révision le .

Questions fréquentes

Ai-je besoin d'un lecteur d'écran pour tester l'accessibilité?

Un test au clavier est la meilleure première étape et ne demande aucun logiciel. Tester ensuite avec un lecteur d'écran gratuit comme NVDA sur Windows ou VoiceOver sur Mac et iPhone est une excellente étape suivante.

Qu'est-ce qu'un lien d'évitement?

Un lien tout en haut de la page, souvent caché jusqu'à ce qu'il reçoive le focus, qui mène directement au contenu principal. Il évite aux personnes qui naviguent au clavier de parcourir tout le menu à chaque page.

Le widget d'Accessible Nord aide-t-il les personnes qui utilisent le clavier?

Il ajoute un contour de focus marqué, surligne les liens et offre un menu de structure de la page, ce qui aide. Mais les pièges au clavier et les div cliquables doivent être corrigés dans votre code.

Ce guide est de l'information générale, pas un avis juridique. Pour vos obligations précises, consultez un avocat ou votre organisme de réglementation.