Aller au contenu principal
Mynto
AccessibiliteRGAA 7.3Niveau AScripts

Élément non contrôlable au clavier

Tout composant d'interface généré ou contrôlé par un script doit être utilisable au clavier, sans souris. C'est le critère RGAA 7.3, niveau A. Un menu, une modale ou un onglet qui ne répond qu'aux clics isole une partie de tes utilisateurs.

C'est quoi

Un élément non contrôlable au clavier est un composant interactif - bouton, menu déroulant, accordéon, onglet, modale - que l'utilisateur ne peut pas activer ou fermer avec les touches du clavier.

Cela arrive quand :

  • Un <div> ou <span> joue le rôle d'un bouton sans tabindex ni gestionnaire de touches.
  • Un script écoute uniquement onclick sans équivalent onkeydown ou onkeyup.
  • Un composant tiers n'expose pas les interactions clavier attendues.

Le critère RGAA 7.3 s'appuie sur le principe WCAG 2.1.1 (Keyboard) : toute fonctionnalité doit être atteignable et activable via clavier seul, sans timing imposé.

Le critère RGAA 7.3 va même un peu plus loin que WCAG 2.1.1 : il exige aussi que le script reste contrôlable par tout dispositif de pointage, pas seulement par la souris. En pratique, c'est la défaillance clavier qui pose presque toujours problème.

Qui est touché

  • Les personnes qui ne peuvent pas utiliser de souris : troubles moteurs, tremblement des mains, paralysie partielle. Le clavier est leur seul moyen d'interagir.
  • Les utilisateurs de lecteurs d'écran : ils naviguent au clavier par définition.
  • Les utilisateurs avancés qui préfèrent le clavier pour la rapidité.
  • Les personnes en situation temporaire : bras cassé, trackpad défaillant.

Impact business

Un composant inatteignable au clavier ne signifie pas une gêne - il signifie une fonctionnalité coupée. Si l'action est essentielle (valider un formulaire, fermer une modale, naviguer dans un menu), l'utilisateur est bloqué.

La navigation clavier figure chaque année parmi les problèmes d'accessibilité les plus répandus relevés par l'enquête WebAIM Million sur les pages d'accueil des sites les plus visités.

L'impact dépend du composant concerné : un accordéon décoratif est une gêne, une modale de confirmation sans échappatoire clavier est un bloquant total.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan repère une partie des cas, comme les éléments interactifs sans tabindex ou sans rôle ARIA. La présence effective d'un gestionnaire clavier ne peut être confirmée que par un test manuel.
  • Test manuel : débranche ta souris. Navigue à la Tab jusqu'au composant. Essaie de l'activer avec Entrée ou Espace. Essaie de le fermer avec Échap. Si rien ne se passe, le critère est en échec.
  • Inspection code : cherche les <div> ou <span> avec onclick qui n'ont pas de tabindex et pas de onkeydown. Cherche les composants JS tiers (sliders, modales, dropdowns) et vérifie leur documentation d'accessibilité.

Comment corriger

Avant - HTML
<!-- Seule la souris fonctionne : pas de tabindex, pas de touche -->
<div class="btn-action" onclick="lancerAction()">
  Voir les détails
</div>
Après - HTML
<!-- Solution 1 : utiliser un vrai élément natif -->
<button class="btn-action" onclick="lancerAction()">
  Voir les détails
</button>

<!-- Solution 2 : si le div est inévitable -->
<div class="btn-action"
     role="button"
     tabindex="0"
     onclick="lancerAction()"
     onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();lancerAction()}">
  Voir les détails
</div>

La correction prioritaire est de remplacer l'élément non sémantique par son équivalent natif : un <div> qui fait bouton devient un <button>, un <span> cliquable devient un <a> si c'est un lien. Les éléments natifs gèrent le clavier nativement, sans ligne de code supplémentaire.

Si le remplacement est impossible (composant tiers, contrainte de markup), applique la correction minimale :

  1. Ajoute role="button" (ou le rôle ARIA adapté : role="tab", role="menuitem", etc.).
  2. Ajoute tabindex="0" pour que l'élément soit atteignable à la Tab.
  3. Écoute onkeydown, appelle event.preventDefault() sur Espace pour éviter le défilement de page, et déclenche l'action sur Entrée et Espace.
  4. Pour les modales ou menus : gère aussi Escape pour fermer.

Sur WordPress, les composants de thème ou plugins peuvent introduire ce problème. Vérifie les paramètres d'accessibilité du plugin concerné ou remonte le bug à l'éditeur.

Questions fréquentes

Pourquoi ne pas simplement ajouter tabindex partout ?

tabindex="0" rend l'élément atteignable au clavier, mais pas activable. Sans gestionnaire onkeydown, l'utilisateur arrive sur l'élément et ne peut rien faire. Les deux vont ensemble. Et tabindex sur des éléments non interactifs (paragraphes, images décoratives) encombre inutilement la navigation.

Qu'est-ce qu'un piège au clavier ?

Un piège au clavier survient quand l'utilisateur entre dans un composant - une modale, un widget - et ne peut plus en sortir au clavier. La touche Tab reste bloquée à l'intérieur sans issue. Ce défaut correspond au critère WCAG 2.1.2 (Pas de piège au clavier) : le focus doit toujours pouvoir s'échapper, typiquement via Échap. C'est un défaut distinct du critère 7.3, même s'il touche aussi la navigation clavier.

Les composants de bibliothèques UI (React, Vue) sont-ils exemptés ?

Non. La responsabilité reste sur le site. Si un composant tiers n'est pas accessible au clavier, tu dois soit le configurer correctement (beaucoup de bibliothèques ont des options d'accessibilité), soit le remplacer, soit l'envelopper avec les attributs ARIA et gestionnaires manquants.

Comment tester rapidement sur un site entier ?

Navigue sur la page à la Tab en observant quels éléments interactifs ne reçoivent jamais le focus. Repère aussi les éléments qui reçoivent le focus mais ne réagissent pas à Entrée ou Espace. L'extension axe DevTools ou Wave signale une partie de ces cas automatiquement.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.