Gestion de raccourcis clavier sur un site ou une application web

L’attribut global aria-keyshortcuts est un outil précieux pour améliorer la transparence des interactions clavier dans une interface web.
Bien utilisé, il renforce l’accessibilité sans alourdir l’interface, à condition de respecter les bonnes pratiques et de bien gérer les événements clavier côté script.

aria-keyshortcuts permet d’annoncer aux technologies d’assistance (lecteurs d’écran, par exemple) qu’un élément interactif peut être activé via un raccourci clavier. Il ne définit pas le raccourci lui-même, mais informe l’utilisateur de son existence.

Avantages

• Accessibilité renforcée.
  Les utilisateurs de lecteurs d’écran sont informés des raccourcis disponibles.
  Tous les utilisateurs peuvent en bénéficier, sous réserve de documenter.

• Documentation implicite.
  Permet de signaler les raccourcis sans avoir à les afficher visuellement partout.

• Complément aux rôles ARIA.
  Fonctionne bien avec des rôles comme button, menuitem, link, etc., pour enrichir l’expérience clavier.

• Internationalisation simplifiée.
  Le raccourci est annoncé tel quel, sans dépendre de la langue de l’interface.

Inconvénients

• Pas de comportement natif.
  aria-keyshortcuts n’active pas le raccourci : il faut gérer l’événement clavier en JavaScript.

• Conflits clavier.
  Il est fortement recommandé de vérifier que le raccourci n'entre pas en conflit avec ceux du navigateur ou du système.

Critère de succès 2.1.4

(Web Content Accessibility Guidelines) Raccourcis clavier (niveau A)

Si un raccourci clavier est implémenté dans le contenu en utilisant uniquement des lettres (y compris des lettres majuscules et minuscules), des signes de ponctuation, des chiffres ou des symboles, alors au moins l'une des conditions suivantes doit être remplie :

1. Désactiver : un mécanisme permet de désactiver le raccourci (le choix sur Kortic) ;
2. Remapper : un mécanisme permet de remapper le raccourci afin d'inclure une ou plusieurs touches non imprimables du clavier (par exemple, Ctrl, Alt, Meta, Command, etc.) ;
3. Actif uniquement lorsque le focus est activé : le raccourci clavier d'un composant de l'interface utilisateur n'est actif que lorsque le focus est activé sur ce composant.

Mise en oeuvre

Côté Hyper Text Language Markup, c'est très simple.

<button type="button" aria-keyshortcuts="b">Action</button>

Et c'est presque tout !
En l'état, ça ne va pas faire grand chose… Il va falloir utiliser un peu de Javascript pour simuler l'action que ce bouton est censé exécuter.

Là aussi, le principe est simple : il suffit de récupérer les éléments disposant de l'attribut aria-keyshortcuts dans le Document Object Model et de capturer les event du document.
A l'exception des champs de saisie, bien entendu.
Pour les éléments interactifs (liens, boutons, …), un trigger click activera la fonction liée à l'élément.
Mais on peut également utiliser cette technique pour gérer des raccourcis de navigation sur des landmarks de page. Par exemple, si vous appuyez sur Touche clavier n n sur cette page, le focus sera mis sur la navigation principale de la page.

Les raccourcis de Kortic

Kortic utilise cette fonctionnalité. Les principaux « landmarks » sont accessible directement par l'utilisation de ce type de raccourci.
Mais on peut aller un peu plus loin en activant d'autre options. Par exemple, appuyer sur la touche Touche clavier w w permet de valider le code HTML ce cette page. Ça fonctionne sur toutes les pages.

Le script

Exemple avec la gestion des raccourcis sur Kortic.

Taille brute : 5,66 kilo-octets (~2,10 kilo-octets gzip)Mis à jour vendredi 2 octobre 2026

(() => {
  'use strict';
  /**
   * Système de gestion des raccourcis clavier accessibles (WCAG 2.2.1 niveau A)
   * Implémente les exigences WCAG 2.2 - Character Key Shortcuts
   * @see https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#character-key-shortcuts
   *
   * Fonctionnement :
   * - Les raccourcis sont définis via l'attribut aria-keyshortcuts sur les éléments
   * - L'utilisateur peut désactiver tous les raccourcis via une checkbox
   * - Les raccourcis sont ignorés dans les champs de saisie
   * - Seuls les raccourcis sans modificateur (Ctrl, Alt, etc.) sont gérés
   *
   * Usage :
   * <button aria-keyshortcuts="h" data-autocommute>Accueil</button>
   * <input type="checkbox" id="toggleEnableShortcuts">
   */
  /**
   * Clé utilisée pour stocker l'état des raccourcis clavier dans le localStorage
   * @type {string}
   * @const
   */
  const SHORTCUTS_KEY = 'enableShortcuts';
  /**
   * Tags HTML à ignorer pour l'activation des raccourcis (zones de saisie)
   * Empêche les conflits avec la saisie de texte
   * @type {string[]}
   * @const
   */
  const ignoreTags = ['TEXTAREA', 'SELECT'];
  /**
   * Vérifie si un élément INPUT est éditable (champ de saisie de texte)
   * Nécessaire car INPUT peut aussi être checkbox, radio, submit, etc.
   * @param {HTMLElement} element - Élément à vérifier
   * @returns {boolean} True si l'input accepte la saisie de texte
   */
  function isEditableInput(element) {
    return element.tagName === 'INPUT' && ['text', 'email', 'tel', 'search', 'url', 'password', 'number', 'date', 'datetime-local', 'month', 'time', 'week'].includes(element.type);
  }
  /**
   * Vérifie si l'élément est visible à l'écran
   * Évite de déclencher des raccourcis sur des éléments masqués
   * @param {HTMLElement} el - Élément à vérifier
   * @returns {boolean} True si l'élément est visuellement visible
   */
  function isSelfVisible(el) {
    const style = window.getComputedStyle(el);
    return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
  }
  /**
   * Lit l'état des raccourcis clavier depuis le localStorage
   * Par défaut, les raccourcis sont activés si aucune valeur n'existe
   * @returns {boolean} True si les raccourcis sont activés
   */
  function areShortcutsEnabled() {
    const value = localStorage.getItem(SHORTCUTS_KEY);
    return value === null || value === 'true';
  }
  /**
   * Met à jour l'état des raccourcis clavier dans le localStorage
   * @param {boolean} enabled - État souhaité (true = activé, false = désactivé)
   */
  function setShortcutsEnabled(enabled) {
    localStorage.setItem(SHORTCUTS_KEY, String(enabled));
  }
  /**
   * Initialisation du contrôle utilisateur pour activer/désactiver les raccourcis
   * Conforme WCAG 2.2.1 niveau A : permet à l'utilisateur de désactiver les raccourcis
   */
  const toggleCheckbox = document.querySelector('#toggleEnableShortcuts');
  const toggleLabel = document.querySelector('label[for="toggleEnableShortcuts"]');
  /**
   * Met à jour le texte du label selon l'état de la checkbox
   * Fournit un retour visuel clair à l'utilisateur
   */
  function updateToggleLabel() {
    if (toggleLabel) {
      toggleLabel.textContent = toggleCheckbox.checked
        ? i18n['aria-shortcuts-enabled'] || 'Shortcuts enabled'
        : i18n['aria-enable-shortcuts'] || 'Enable shortcuts';
    }
  }
  if (toggleCheckbox) {
    // Initialisation de l'état de la checkbox au chargement (lecture du localStorage)
    toggleCheckbox.checked = areShortcutsEnabled();
    updateToggleLabel();
    // Écoute des changements pour mettre à jour l'état et le label
    toggleCheckbox.addEventListener('input', () => {
      setShortcutsEnabled(toggleCheckbox.checked);
      updateToggleLabel();
    });
  }
  /**
   * Gestionnaire principal des raccourcis clavier
   *
   * Comportement :
   * 1. Vérifie si les raccourcis sont activés
   * 2. Ignore si le focus est dans un champ de saisie
   * 3. Ignore si une touche modificatrice est pressée
   * 4. Recherche un élément visible avec aria-keyshortcuts correspondant
   * 5. Active l'élément trouvé (clic et/ou focus)
   *
   * Attributs utilisés :
   * - aria-keyshortcuts="x" : définit le raccourci (touche unique sans modificateur)
   * - data-autocommute : si présent, déclenche un clic automatique
   * - data-autocommute="false" : empêche le focus automatique
   */
  document.addEventListener('keydown', e => {
    // Sortie rapide si les raccourcis sont désactivés
    if (!areShortcutsEnabled()) return;
    const activeElement = document.activeElement;
    const tag = activeElement.tagName;
    // Ignorer si focus dans un champ de saisie
    if (ignoreTags.includes(tag) || isEditableInput(activeElement)) return;
    // Ignorer si touche modificatrice (Ctrl, Alt, Cmd, AltGr)
    if (e.ctrlKey || e.altKey || e.metaKey || e.getModifierState('AltGraph')) return;
    // Recherche des éléments avec le raccourci correspondant
    const candidates = Array.from(document.querySelectorAll(`[aria-keyshortcuts="${e.key}"]`));
    // Sélection du premier élément visible
    const target = candidates.find(isSelfVisible);
    if (target) {
      // Clic automatique si l'attribut data-autocommute est présent
      if (target.hasAttribute('data-autocommute')) {
        target.click();
      }
      // Focus automatique sauf si explicitement désactivé
      if (!ignoreTags.includes(target.tagName)) {
        if (target.getAttribute('data-autocommute') !== String(false)) {
          target.focus();
        }
      }
    }
  });
})();

Télécharger kortic-aria-shortcuts-utility.js

That's all, Folks !