Un tutoriel explique comment sauvegarder un document et écrit : appuyez sur Ctrl et S en même temps. Le lecteur doit repérer immédiatement quelles touches presser, sans les confondre avec le reste de la phrase ni avec un extrait de code affiché juste au-dessus.
La balise <kbd> existe pour ce cas précis : elle marque un passage comme une saisie clavier attendue de la part de l'utilisateur, une touche isolée ou une combinaison, et le distingue du texte narratif comme du code affiché à l'écran.
Définition
La balise <kbd> encadre un texte qui représente une saisie clavier : la touche ou la combinaison de touches que l'utilisateur doit presser pour obtenir un résultat. Elle ne décrit jamais un bouton à cliquer à la souris ni un geste tactile, seulement ce qui passe par un clavier, physique ou virtuel.
Par défaut, la plupart des navigateurs l'affichent dans une police à chasse fixe, parfois avec un léger cadre, pour qu'une touche se reconnaisse d'un coup d'oeil au milieu d'une phrase. Ce style reste modifiable en CSS ; ce qui compte, c'est le sens que la balise porte, pas son apparence.
Représenter une combinaison de touches
Une touche isolée s'écrit avec une seule balise, par exemple <kbd>Entrée</kbd>. Une combinaison comme Ctrl+S s'obtient en imbriquant un <kbd> à l'intérieur d'un autre : la balise extérieure représente la combinaison entière, chaque balise intérieure représente une touche prise isolément.
<p>
Enregistrez le fichier avec <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd
>.
</p>Le signe plus entre les deux touches n'a rien d'automatique : le navigateur ne l'ajoute pas tout seul, c'est du texte normal à écrire à la main entre les deux <kbd> imbriquées pour que la combinaison reste lisible dans la page.
Différence avec code et samp
Trois balises se ressemblent à l'écran, toutes affichées en police à chasse fixe par défaut, et ne se distinguent que par ce qu'elles représentent. <code> montre un fragment de code source, <samp> montre ce qu'un programme affiche en sortie, <kbd> montre ce que l'utilisateur doit taper lui-même. Le tableau résume la distinction avec un exemple pour chacune.
| Balise | Ce qu'elle représente | Exemple |
|---|---|---|
| <kbd> | Une saisie clavier attendue de l'utilisateur | Appuyez sur <kbd>Entrée</kbd> |
| <code> | Un fragment de code source | La variable <code>total</code> vaut 0 |
| <samp> | La sortie produite par un programme | Le terminal affiche <samp>Fichier introuvable</samp> |
Une confusion fréquente consiste à citer une commande à taper dans un terminal avec code plutôt qu'avec <kbd>. Le code représente ce qui existe déjà quelque part, un fichier ou une bibliothèque, tandis que <kbd> représente un geste que le lecteur doit poser lui-même, maintenant, sur son propre clavier.
Sémantique et accessibilité
<kbd> n'ajoute aucune annonce vocale particulière dans la plupart des lecteurs d'écran, mais son intérêt reste bien réel : séparer clairement l'instruction du reste du texte aide toute personne qui parcourt rapidement une documentation, y compris avec un outil de recherche dans la page. Une personne qui pilote son ordinateur à la voix ou via un dispositif d'accès alternatif au clavier profite aussi d'un nom de touche exact et isolé, plutôt que noyé au milieu d'une phrase.
Un piège classique consiste à utiliser <kbd> pour styliser un bouton d'interface, comme Valider ou Annuler, simplement parce que son rendu par défaut, en cadre monospace, ressemble un peu à un bouton. <kbd> ne décrit jamais un clic de souris ni un contrôle visuel : réservez-la strictement à ce qui se presse sur un clavier. Pour un bouton d'interface, la balise appropriée reste <button>.
Cas d'usage courants
<kbd> se retrouve surtout dans la documentation technique, les tutoriels, les listes de raccourcis clavier d'une application, ou les messages d'aide qui expliquent comment interagir avec un formulaire.
Dans une formation en ligne, elle est particulièrement utile : elle indique sans ambiguïté quelle touche presser pendant un exercice pratique, ce qui évite au lecteur de deviner si un mot fait partie de l'explication ou de l'instruction elle-même à exécuter.
Questions fréquentes
Faut-il utiliser <kbd> pour un bouton affiché à l'écran, comme Valider ?
Non. <kbd> représente uniquement une touche de clavier à presser, jamais un bouton cliquable à la souris ni un contrôle tactile. Un bouton d'interface s'écrit avec la balise <button>, qui porte son propre sens pour les technologies d'assistance. Réserver <kbd> au clavier évite de brouiller cette distinction pour les lecteurs d'écran.
Comment écrire un raccourci à trois touches, comme Ctrl+Maj+S ?
En imbriquant un <kbd> par touche à l'intérieur d'un <kbd> global qui représente la combinaison complète, séparés par des signes plus tapés à la main. La structure reste la même qu'avec deux touches, elle s'étend simplement d'un niveau supplémentaire de balises imbriquées, sans limite fixée par la spécification.
Le style par défaut de <kbd> convient-il tel quel sur un site ?
Le rendu par défaut, une police à chasse fixe et un léger cadre, varie d'un navigateur à l'autre et reste rarement suffisant pour une identité visuelle soignée. Rien n'empêche de le personnaliser en CSS, avec un fond gris clair, des coins arrondis ou une légère ombre. Ce qui ne doit jamais changer, c'est le sens de la balise, réservé au clavier.