Série En conditions réelles · Épisode 1 · 6 min

Je teste un site au clavier en direct

Défi : je range la souris et je traverse une page uniquement au clavier, comme le font tous les jours beaucoup de personnes.

Publié le 28 octobre 2026.Consulter la transcription de la vidéo Voir sur YouTube (nouvelle fenêtre)

Chapitres

Transcription

Texte intégral de la narration de l’épisode.

Situations du quotidien

Petit défi : pour les cinq prochaines minutes, tu ranges la souris. Interdiction de cliquer. On va parcourir une vraie page uniquement au clavier, comme le font tous les jours beaucoup de personnes. Cinq touches suffisent : Tab pour avancer, Maj plus Tab pour reculer, Entrée et Espace pour activer, Échap pour sortir. La règle du jeu : à chaque appui, on regarde ce qui s’allume à l’écran, et on note tout ce qui bloque. Pas de théorie aujourd’hui, on teste pour de vrai.

Tabuler une page, du début à la fin

Le principe du test tient en une phrase : je pose le doigt sur Tab et je traverse toute la page, du haut jusqu’au pied. À chaque arrêt, je me pose trois questions. Un : est-ce que je vois clairement où se trouve le focus, c’est le critère 10.7. Deux : est-ce que l’ordre de tabulation suit ce que je lis à l’écran, c’est le critère 12.8. Trois : est-ce que je peux toujours ressortir de là où je suis entré. Gardons ces trois questions en tête, et lançons le parcours.

Parcours en direct (journey)

Premier appui sur Tab, tout en haut de la page. Bonne surprise : un lien Aller au contenu apparaît, avec un contour bien net. Le parcours démarre proprement, je vois exactement où je suis. Je continue dans l’en-tête : logo, recherche, panier, chaque arrêt est visible. Voilà à quoi ressemble une prise de focus qui respecte le critère 10.7. Deuxième arrêt, la navigation. Là, un problème classique : le menu Boutique se déploie tout seul quand la souris le survole, mais moi je n’ai pas de souris. Au clavier, j’atteins l’entrée principale, et le sous-menu reste invisible. Un contenu qui n’apparaît qu’au survol doit aussi être atteignable au clavier, c’est le critère 12.11. Premier vrai blocage noté. On descend vers le formulaire. Nom, ça va, je vois le champ actif. Email, pareil. Et là, sur le champ Message, je tabe et plus rien ne s’allume. Le focus est peut-être dedans, mais rien ne me le montre. C’est un trou de focus, exactement ce que traque le critère 10.7. Deuxième problème noté. Et pour finir, j’ouvre la modale de confirmation. Elle s’affiche, mais le focus reste sur la page derrière : je tabe et je me promène dans du contenu que je ne vois plus. Pire, Échap ne la ferme pas. Je suis coincé.

Le même champ, deux traitements

Reprenons ce champ où le focus avait disparu, au ralenti cette fois. À gauche, le comportement fautif : quand je tabe, l’élément reçoit bien le focus dans le code, mais aucun contour, aucun fond, rien ne l’indique à l’écran. Pour la personne qui navigue au clavier, c’est comme avancer les yeux fermés. À droite, le bon réglage : un contour de focus net et contrasté suit chaque arrêt. C’est toute la différence que fait le critère 10.7. La règle est simple : ne supprime jamais le focus visible sans le remplacer par un indicateur au moins aussi clair.

Modale : entrer, naviguer, ressortir

La modale qui m’a coincé, on la rejoue proprement. Le piège d’abord : la fenêtre s’ouvre, mais le focus reste derrière, sur la page, et Tab continue d’explorer ce que je ne vois plus. Sans sortie, c’est un piège au clavier, et le critère 12.9 dit clairement que ça ne doit pas exister. Le bon comportement ensuite : à l’ouverture, le focus entre dans la modale. Tab tourne à l’intérieur sans repartir dans la page. Échap la ferme, et le focus revient sur le bouton qui l’avait ouverte. Entrer, naviguer, ressortir : les trois doivent marcher au clavier seul. Sur ce site, ce n’était pas le cas, donc je le note comme bloquant.

L’ordre de Tab suit le code, pas les yeux

Un dernier réflexe, plus discret mais qui coûte cher en audit : l’ordre de tabulation. À l’écran, je lis Nom, puis Email, puis Message, dans cet ordre. Mais la touche Tab, elle, suit ce que dit le code. Ici, des valeurs de tabindex positives ont été posées à la main : le focus part sur le nom, file directement au message, puis remonte à l’email. Je tabule et je pars dans tous les sens. À droite, sans tabindex forcé, le focus suit simplement l’ordre du code, qui colle à la lecture. Le critère 12.8 ne réclame pas un ordre unique, mais un ordre cohérent : le parcours doit rester logique. Le test tient en deux gestes : tabule du début à la fin, puis fais Maj plus Tab pour revenir, et vérifie que le chemin garde du sens dans les deux sens.

Checklist

Récapitulons le protocole, pour que tu puisses le rejouer sur ton site dès aujourd’hui. Range la souris et tabule toute la page, du premier au dernier élément. À chaque arrêt, regarde si le focus se voit : contour, fond, soulignement, peu importe la forme, tant qu’elle est nette, c’est le critère 10.7. Vérifie ensuite que l’ordre de tabulation reste cohérent avec ce que tu lis à l’écran, dans les deux sens, c’est le critère 12.8. Ouvre chaque modale et assure-toi que le focus entre, tourne dedans, et qu’Échap la ferme, sinon c’est un piège au sens du critère 12.9. Et déclenche au clavier tout ce qui n’apparaissait qu’au survol de la souris, comme les menus, au titre du critère 12.11. Cinq gestes, et tu repères en direct la majorité des blocages clavier.

CTA

À ton tour maintenant. Choisis le parcours le plus important de ton site, tunnel d’achat, formulaire de contact, connexion, et range la souris cinq minutes. Traverse-le au clavier seul, en gardant les trois questions : est-ce que je vois le focus, est-ce que l’ordre suit, est-ce que je peux ressortir. Note tout ce qui bloque. Ensuite, pour analyser la page en détail et prioriser les corrections, rendez-vous sur RGAA Checker point com. Bon test, et à bientôt pour la prochaine expérience.

Approfondir dans le guide

Cet épisode aborde ces critères du RGAA 4.1.2. Ouvre leur fiche pour la méthode de test détaillée, les cas particuliers et les exemples.

D’autres épisodes qui abordent des critères proches, dans d’autres séries.

Navigation au clavier
Épisode 3Bases RGAA4 minEn ligne
ARIA : quand ne pas l’utiliser
Épisode 6RGAA en pratique5 minEn ligne
Modale, accordéon, onglets : le clavier se code
Épisode 12RGAA en pratique5 minEn ligne

Passer à l’action

La vidéo pose le cadre. Pour repérer des pistes d’amélioration sur un site réel, lance une analyse ou explore le guide des 106 critères.

Analyser un site Guide RGAA