Dans chaque page web, les raccourcis clavier n’utilisant qu’une seule touche (lettre minuscule ou majuscule, ponctuation, chiffre ou symbole) sont-ils contrôlables par l’utilisateur ?
Un utilisateur de NVDA navigue avec la touche H pour sauter de titre en titre, B pour les boutons, F pour les champs. Si votre site a défini ces mêmes lettres comme raccourcis JavaScript, il déclenche vos fonctionnalités au lieu de lire la page. Le conflit est silencieux, imprévisible, parfois bloquant.
Le critère 12.10 vise les raccourcis à touche unique implémentés par le site : une lettre, un chiffre, un symbole, sans touche de modification (Ctrl, Alt, Shift). YouTube avec « k » pour pause, Gmail avec « c » pour composer un message. Ces raccourcis ne viennent pas du navigateur ou du système — ils viennent de votre JavaScript.
Pour valider le critère, au moins l'une de ces trois conditions doit être remplie pour chaque raccourci : l'utilisateur peut le désactiver, l'utilisateur peut le remapper avec une touche de modification (« k » devient « Ctrl+k »), ou le raccourci n'est actif que lorsque le focus clavier est positionné sur le composant concerné.
La troisième option est souvent la plus rapide à mettre en œuvre. Écoutez l’événement keydown sur le composant lui-même plutôt que sur document. Pas d’interface de configuration à construire, pas de préférence à stocker en base.
Un test pour vérifier que les raccourcis clavier à caractère unique sont désactivables
Désactivation ou portée restreinte des raccourcis à touche unique
- Identifiez tous les raccourcis à touche unique du document : lettre (minuscule ou majuscule), chiffre, ponctuation ou symbole, sans Ctrl, Alt ni Maj.
- Pour chaque raccourci identifié, vérifiez qu’au moins l’une de ces trois conditions est remplie : a. Un mécanisme accessible permet à l’utilisateur de désactiver le raccourci ; b. Un mécanisme accessible permet à l’utilisateur de le reconfigurer avec une touche de modification (Ctrl, Alt, Maj…) ; c. Le raccourci n’est actif que lorsque le focus clavier est positionné sur le composant auquel il est lié.
- Si aucune condition n’est remplie pour au moins un raccourci, le test échoue.
Exemples
❌ Non conforme : Raccourci global capté sur document — non conforme
<video id="player" src="conference.mp4" controls></video>
<script>
document.addEventListener("keydown", function(event) {
if (event.key === "k") {
const video = document.getElementById("player");
video.paused ? video.play() : video.pause();
}
});
</script>Le raccourci « k » est actif partout sur la page, quelle que soit la position du focus. Un utilisateur de JAWS qui appuie sur K pour naviguer vers un lien déclenche à la place la pause de la vidéo. Le conflit est invisible dans l’interface et peut désorienter complètement l’utilisateur.
✅ Conforme : Raccourci limité au focus sur le composant — conforme
<video id="player" src="conference.mp4" controls
tabindex="0"
aria-label="Conférence accessibilité numérique 2025"></video>
<script>
const player = document.getElementById("player");
player.addEventListener("keydown", function(event) {
if (event.key === "k") {
player.paused ? player.play() : player.pause();
}
});
</script>Le raccourci « k » ne se déclenche que si le focus clavier est sur l’élément vidéo. Quand l’utilisateur navigue ailleurs sur la page, la touche k n’interfère pas avec son lecteur d’écran. Aucune interface de configuration n’est nécessaire : c’est la solution la moins coûteuse à implémenter.
Astuces et pièges
⚠️ Shift+Lettre reste un raccourci à touche unique
Un raccourci déclenché par « K » majuscule (Shift+K) est toujours dans le périmètre du critère 12.10. Shift seul ne constitue pas une touche de modification suffisante. Pour être conforme, le raccourci doit inclure Ctrl, Alt ou une combinaison équivalente. Vérifiez event.ctrlKey ou event.altKey dans votre handler avant de conclure à la conformité.
⚠️ Les raccourcis de bibliothèques tierces vous engagent aussi
Un player vidéo ou une carte interactive intégrée via une bibliothèque JavaScript peut introduire des raccourcis à touche unique sans que vous les ayez explicitement codés. Vous restez responsable de la page entière. Vérifiez si la bibliothèque propose une option de désactivation (keyboard: false, shortcuts: false). Si ce n’est pas possible, documentez l’écart dans votre déclaration d’accessibilité.
💡 La solution focus-only ne demande aucune interface utilisateur
Contraindre un raccourci au focus sur un composant (addEventListener sur l’élément plutôt que sur document ou window) est la seule des trois options conformes qui ne nécessite pas de construire un panneau de configuration. C’est la recommandation à retenir pour les lecteurs médias, les carousels actifs au clavier et les widgets ARIA complexes.
⚠️ Raccourcis dans les widgets ARIA (grilles, combobox, sliders)
Un data grid ou un combobox peut légitimement utiliser des touches fléchées ou des lettres pour la navigation interne. Ces raccourcis sont conformes s’ils ne fonctionnent que lorsque le focus est à l’intérieur du widget. Les patterns du WAI-ARIA Authoring Practices Guide (APG) documentent les comportements clavier attendus pour chaque type de composant.
⚠️ Raccourcis navigateur et système : hors périmètre
Ctrl+T, Ctrl+L, F5, les raccourcis NVDA ou JAWS : le critère 12.10 ne les concerne pas. Il ne vise que ce que votre JavaScript implémente via addEventListener. Si la touche déclenchée provient d’un handler côté code, elle est dans le périmètre. Si elle vient du navigateur ou du lecteur d’écran, elle ne l’est pas.
Questions fréquentes
Comment repérer les raccourcis à touche unique sur une page en audit ?
Cherchez dans le JavaScript tous les addEventListener('keydown', ...) ou addEventListener('keypress', ...) attachés à document ou window. Examinez ensuite les conditions : si le handler se déclenche sur event.key === 'k' sans vérifier event.ctrlKey, event.altKey ou event.metaKey, vous avez un raccourci à touche unique dans le périmètre. En test manuel : naviguez avec NVDA activé et appuyez sur H, K, J, M, B, 1 à 6 — tout déclenchement inattendu est un signal d’alerte.
Pourquoi les raccourcis de NVDA ou JAWS sont-ils hors périmètre du critère RGAA 12.10 ?
Non. Les technologies d’assistance gèrent leurs propres raccourcis indépendamment de votre code. Le critère vise uniquement ce que votre JavaScript implémente. En revanche, vos raccourcis peuvent entrer en conflit avec ceux du lecteur d’écran : c’est précisément le problème que 12.10 cherche à prévenir.
Comment documenter les raccourcis clavier présents sur une page pour le critère RGAA 12.10 ?
Le RGAA 12.10 n’impose pas de documentation explicite des raccourcis. En revanche, si vous choisissez la solution de désactivation ou de reconfiguration, le mécanisme doit être accessible à l’utilisateur, ce qui implique qu’il sache que ces raccourcis existent. Une mention dans l’aide ou un panneau d’accessibilité est une bonne pratique, mais pas une obligation du critère.
Comment l'attribut accesskey sur des liens est-il traité par le critère RGAA 12.10 ?
Oui. L’attribut accesskey définit des raccourcis à touche unique et entre dans le périmètre du critère 12.10. Son comportement varie fortement selon les navigateurs et les lecteurs d’écran, et il provoque fréquemment des conflits. La plupart des experts en accessibilité déconseillent son utilisation. Si vous l’utilisez, vérifiez que l’une des trois conditions de conformité est remplie.
Comment vérifier la conformité au critère RGAA 12.10 sans accéder au code source ?
Ouvrez les outils de développement (onglet Sources ou Debugger), puis ajoutez un écouteur d’événement global via la console : document.addEventListener('keydown', e => console.log(e.key, e.target)). Naviguez sur la page et appuyez sur différentes touches. Si des fonctions se déclenchent alors que le focus n’est pas sur un composant vidéo ou interactif, le critère est potentiellement en échec.