Attribut HTML accesskey

L'attribut HTML accesskey est un attribut global qui définit un raccourci clavier permettant d'activer ou de mettre le focus sur un élément spécifique. Lorsque l'utilisateur appuie sur la ou les touches modificatrices du navigateur combinées au caractère assigné, cet élément reçoit le focus (et, pour les liens et les boutons, est activé). La valeur de l'attribut doit être constituée d'un ou plusieurs caractères imprimables séparés par des espaces — le navigateur utilise le premier qu'il peut prendre en charge.

En HTML 4.01, accesskey ne pouvait être utilisé qu'avec un petit ensemble d'éléments : <a>, <area>, <button>, <input>, <label>, <legend> et <textarea>.

En HTML5, accesskey est un attribut global et peut donc être appliqué sur n'importe quel élément. Notez que l'appliquer sur un élément non interactif (tel qu'un <div> ou un <p>) déplace simplement le focus clavier vers cet élément sans déclencher de clic — il est donc plus utile sur des contrôles interactifs.

Syntaxe

<tag accesskey="single_character">...</tag>

Par exemple, <button accesskey="s">Save</button> assigne la touche s.

Comment déclencher le raccourci

Il n'existe pas de combinaison de touches unique et standardisée pour les accesskeys — elle dépend du navigateur et du système d'exploitation. L'utilisateur maintient les touches modificatrices indiquées ci-dessous et appuie sur le caractère assigné :

Lorsque plusieurs éléments partagent le même accesskey, les navigateurs modernes font généralement défiler le focus entre ces éléments à chaque pression successive plutôt que d'en activer un seul.

Quand accesskey est (et n'est pas) approprié

accesskey est mieux réservé aux environnements contrôlés et dédiés où vous connaissez le navigateur et le public, et où un raccourci documenté apporte une réelle valeur ajoutée :

• Outils internes / intranet où les utilisateurs avancés répètent les mêmes actions toute la journée (ex. : « Alt+S pour enregistrer une fiche »).
• Bornes et applications embarquées fonctionnant sur un navigateur connu, où vous maîtrisez l'environnement clavier.
• Utilitaires mono-page avec quelques raccourcis bien communiqués.

Évitez accesskey sur les sites web et applications web publics et polyvalents, pour les raisons suivantes :

• Conflits. Une touche choisie peut entrer en collision avec un raccourci natif du navigateur ou du système d'exploitation, ou avec une commande d'une technologie d'assistance.
• Découvrabilité. Aucune indication visuelle ne signale l'existence d'un raccourci, si bien que les utilisateurs les trouvent rarement.
• Variabilité des claviers. Un caractère peut être indisponible sur certaines dispositions de clavier, ce qui pose un véritable problème d'internationalisation.
• Charge cognitive. Les accesskeys numériques (1, 2, 3) ne véhiculent aucune signification et peuvent dérouter les utilisateurs souffrant de handicaps cognitifs.
• Gestion du focus. Des raccourcis qui se chevauchent peuvent interférer avec le comportement naturel de tabindex et l'ordre de tabulation de la page.

Considérations d'accessibilité

Les raccourcis à un seul caractère sont régis par le Critère de succès WCAG 2.1 2.1.4 — Raccourcis clavier par caractère. Le problème est qu'un raccourci lié à un seul caractère peut être déclenché accidentellement — surtout par les utilisateurs de lecteurs d'écran et de saisie vocale, dont les outils génèrent des frappes au fil de la navigation. Une activation involontaire d'un accesskey peut déplacer le focus, soumettre un formulaire ou déclencher une action que l'utilisateur n'avait pas prévue.

Pour satisfaire le CS 2.1.4, vous devez permettre aux utilisateurs de désactiver le raccourci, de le remapper, ou de le rendre actif uniquement lorsque le composant concerné a le focus.

Comme accesskey n'offre aucune affordance visuelle, exposez le raccourci aux technologies d'assistance grâce à l'attribut aria-keyshortcuts. Il documente la frappe pour les lecteurs d'écran sans modifier le comportement :

<button accesskey="s" aria-keyshortcuts="Alt+S">Save</button>

Exemple sur un bouton et un champ de saisie

accesskey est le plus justifié sur des contrôles de formulaire interactifs, où mettre le focus sur l'élément correspond exactement à ce que l'utilisateur souhaite :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="search" accesskey="f">Search (Alt+F):</label>
      <input id="search" type="text" accesskey="f" />
      <br />
      <button type="submit" accesskey="s" aria-keyshortcuts="Alt+S">
        Save
      </button>
    </form>
    <p>Press the modifier keys for your browser plus the letter, e.g. <strong>Alt + F</strong> to focus the search field or <strong>Alt + S</strong> to reach Save.</p>
  </body>
</html>

Exemple sur des liens

Le même attribut peut assigner des raccourcis à des liens de navigation :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/learn-html.html" accesskey="h">HTML online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-css.html" accesskey="c">CSS online tutorial</a>
    <br />
    <a href="https://www.w3docs.com/learn-git.html" accesskey="g">GIT online tutorial</a>
  </body>
</html>

Attributs associés

• Attributs globaux HTML
• Attribut HTML id
• Attribut HTML class
• Référence des attributs HTML

Exercice