Balise HTML <kbd>
La balise HTML <kbd> marque la saisie utilisateur depuis un clavier ou autre périphérique. Sémantique, raccourcis, style et accessibilité.
La balise HTML <kbd> marque la saisie utilisateur — le texte que le lecteur est censé taper, dicter ou transmettre d'une autre façon à un périphérique. Le nom vient de « keyboard input » (saisie clavier), mais la spécification l'utilise pour tout type de saisie fournie par l'utilisateur, y compris les commandes vocales et les autres méthodes de saisie, pas uniquement les frappes physiques.
Cette page explique ce que <kbd> signifie sémantiquement, comment le combiner avec <samp> pour exprimer des scénarios plus précis, comment encapsuler des combinaisons de touches, comment le styliser pour ressembler à une vraie touche, et ce qu'il implique (ou n'implique pas) en matière d'accessibilité.
Pourquoi utiliser <kbd> ?
<kbd> est un élément sémantique : il indique au navigateur, aux moteurs de recherche et aux autres outils qu'une portion de texte représente quelque chose que l'utilisateur saisit, plutôt que du texte courant. Il est particulièrement utile dans les guides d'utilisation, les tutoriels et la documentation des raccourcis clavier, où vous souhaitez que les raccourcis et commandes se démarquent.
Par défaut, les navigateurs affichent <kbd> avec une police à espacement fixe (chaque caractère a la même largeur). Comme c'est aussi le rendu par défaut de l'élément <code>, les deux peuvent sembler identiques sans mise en forme — ce qui explique en partie que <kbd> soit sous-utilisé. Utilisez <kbd> lorsque le texte est quelque chose que l'utilisateur saisit, et <code> lorsqu'il s'agit de code source. Pour une variable ou un espace réservé à l'intérieur de cette saisie, consultez l'élément <var>.
Syntaxe
<kbd> est un élément en ligne écrit sous forme d'une paire de balises, avec le texte de saisie entre elles :
<p>Press <kbd>Enter</kbd> to submit the form.</p>La balise fermante </kbd> est techniquement facultative dans certains contextes, mais il est recommandé de toujours l'inclure — cela rend le balisage non ambigu et plus facile à lire.
Exemple de base
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>To copy the selected text, press <kbd>Ctrl</kbd> and <kbd>C</kbd>.</p>
</body>
</html>Marquer des combinaisons de touches
Pour représenter un raccourci à plusieurs touches, encapsulez la combinaison entière dans un <kbd> externe et chaque touche individuelle dans son propre <kbd> imbriqué. L'élément externe représente la saisie combinée en tant qu'unité ; chaque élément interne représente une frappe de touche :
<p>
Save the document with
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>Cet imbrication est une convention, pas une obligation — un seul <kbd> par touche fonctionne aussi — mais elle rend la structure d'un raccourci explicite et vous offre des points d'accroche précis pour styliser chaque touche séparément.
Combiner <kbd> avec <samp>
Vous pouvez imbriquer <kbd> et <samp> (sortie exemple/système) pour exprimer des significations plus précises définies par la spécification HTML :
<kbd>à l'intérieur de<samp>— une saisie renvoyée à l'utilisateur par le système, par exemple une commande affichée dans un terminal telle que le système l'a reçue.<samp>à l'intérieur de<kbd>— une saisie basée sur du texte affiché à l'écran par le système, par exemple l'utilisateur cliquant sur un élément de menu dont le libellé a été rendu par le système.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Input echoed back by the system -->
<p>The console showed <samp><kbd>npm start</kbd></samp> after I typed it.</p>
<!-- Input that comes from on-screen text -->
<p>To open the menu, choose <kbd><samp>File</samp></kbd>.</p>
</body>
</html>Styliser <kbd> pour ressembler à une touche
<kbd> ne possède aucune apparence intégrée au-delà de la police à espacement fixe, aussi l'ajout de CSS rend les raccourcis bien plus lisibles. Une bordure, un peu de rembourrage et un fond clair font ressembler chaque touche à une véritable touche physique. Ici, la combinaison externe conserve l'aspect par défaut tandis que chaque touche interne est stylisée avec la classe .key :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
kbd.key {
padding: 2px 6px;
border-radius: 4px;
border: 1px solid #b4b4b4;
background-color: #f7f7f7;
box-shadow: 0 1px 0 #b4b4b4;
font-family: monospace;
font-size: 0.9em;
}
</style>
</head>
<body>
<p>
Create a new document by pressing
<kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
</p>
</body>
</html>La balise <kbd> n'est pas dépréciée. Vous pouvez obtenir des effets plus riches avec les propriétés CSS font-family et border, comme illustré ci-dessus.
Accessibilité
<kbd> n'a pas de sémantique particulière pour les technologies d'assistance — les lecteurs d'écran ne l'annoncent pas comme « saisie clavier », et il ne transmet aucun rôle ni état. Il s'agit d'un indice de présentation et de sémantique destiné aux lecteurs voyants et aux machines, et non d'un libellé accessible.
Ne vous fiez donc jamais uniquement à <kbd> pour communiquer un sens. Si un raccourci doit être compris par tous, expliquez-le dans le texte environnant (par exemple, « Appuyez sur Ctrl plus C pour copier ») plutôt que de vous fier aux visuels de touches stylisées.
Attributs
La balise <kbd> prend en charge les Attributs globaux et les Attributs d'événement.
Balises associées
<code>— un fragment de code informatique.<samp>— sortie exemple ou système.<var>— une variable ou un espace réservé dans du code ou une saisie.