Clavier

Ce que ce critère demande

Toutes les fonctionnalités du contenu doivent être utilisables via une interface clavier, sans exiger de timings spécifiques pour les frappes individuelles. L’utilisateur doit pouvoir atteindre chaque élément interactif avec Tab, l’activer avec Entrée ou Espace, et utiliser des widgets complexes avec les touches fléchées et d’autres combinaisons standard.

Il existe deux exceptions limitées : les saisies qui dépendent du chemin du mouvement de l’utilisateur (dessin à main levée, signature d’un document) et non seulement des points de départ et d’arrivée, et les saisies qui reproduisent une action physique réelle dans laquelle le chemin est déterminant.

Comment y répondre

• Utiliser des éléments interactifs natifs (<button>, <a href>, <input>, <select>) — ils sont utilisables au clavier par défaut.
• Pour les widgets personnalisés construits à partir de <div> ou <span>, ajouter role, tabindex="0", et des gestionnaires de touches pour Entrée, Espace, Échap et les flèches selon le pattern concerné.
• Suivre le guide des pratiques de création ARIA pour les menus, onglets, comboboxes, boîtes de dialogue et arborescences — chacun dispose d’un modèle d’interaction clavier défini.
• Fournir un équivalent clavier pour chaque geste souris uniquement : le glisser-déposer nécessite une alternative de réorganisation par boutons, les menus sur survol doivent s’ouvrir au clic, les carrousels tactiles doivent avoir des boutons précédent/suivant.
• Tester en débranchant la souris et en parcourant l’intégralité du flux.

Erreurs courantes

• <div onclick> sans role="button", tabindex="0" ni gestionnaire de touches — invisible pour les utilisateurs de clavier.
• Listes déroulantes personnalisées où le déclencheur est accessible mais les options ne sont pas navigables avec les touches fléchées.
• Tableaux kanban glisser-déposer, téléverseurs de fichiers ou outils de dessin sur canvas sans alternative clavier.
• Boutons de fermeture de modal présents mais sans gestionnaire de la touche Échap.
• Info-bulles et menus sur survol uniquement qui n’apparaissent jamais sous le focus clavier.
• Carrousels et galeries d’images utilisables uniquement par glissement ou clic sur des indicateurs sans tabindex.

axe et Lighthouse signalent les tabindex manquants et les noms accessibles absents, mais ils ne peuvent pas vérifier si votre liste déroulante personnalisée répond effectivement aux touches fléchées — cette partie requiert un test manuel.

Pourquoi c’est important

Il s’agit du critère de succès le plus important pour l’utilisabilité. Les utilisateurs de lecteurs d’écran naviguent au clavier. Les utilisateurs de contacteurs émulent un clavier. Les utilisateurs de contrôle vocal émettent des commandes qui correspondent à des événements clavier. Les utilisateurs expérimentés souffrant de troubles musculo-squelettiques en dépendent. Un site qui échoue au critère 2.1.1 exclut de fait toute personne ne pouvant utiliser une souris — et ce groupe est bien plus large que l’évident.