Tag HTML <kbd>
Il tag HTML <kbd> indica l'input dell'utente da tastiera o altro dispositivo. Semantica, combinazioni di tasti, stile e accessibilità.
Il tag HTML <kbd> segna l'input dell'utente — testo che il lettore è destinato a digitare, pronunciare o altrimenti immettere in un dispositivo. Il nome sta per "keyboard input" (input da tastiera), ma la specifica lo utilizza per qualsiasi input fornito dall'utente, inclusi i comandi vocali e altri metodi di input, non solo i tasti fisici.
Questa pagina tratta il significato semantico di <kbd>, come combinarlo con <samp> per esprimere scenari più specifici, come racchiudere le combinazioni di tasti, come applicare uno stile che ricordi un tasto reale e cosa significa (e non significa) per l'accessibilità.
Perché usare <kbd>?
<kbd> è un elemento semantico: comunica al browser, ai motori di ricerca e ad altri strumenti che un frammento di testo rappresenta qualcosa che l'utente inserisce, anziché prosa ordinaria. È particolarmente utile nelle guide utente, nei tutorial e nella documentazione delle scorciatoie da tastiera, dove si vuole che le scorciatoie e i comandi risaltino.
Per impostazione predefinita i browser rendono <kbd> con un font monospazio (ogni carattere ha la stessa larghezza). Poiché anche l'elemento <code> usa il font monospazio per impostazione predefinita, i due possono apparire identici — ed è uno dei motivi per cui <kbd> è sottoutilizzato. Usa <kbd> quando il testo è qualcosa che l'utente inserisce, e <code> quando si tratta di codice sorgente. Per una variabile o un segnaposto all'interno di quell'input, consulta l'elemento <var>.
Sintassi
<kbd> è un elemento inline scritto come coppia di tag, con il testo di input tra di essi:
<p>Press <kbd>Enter</kbd> to submit the form.</p>Il tag di chiusura </kbd> è tecnicamente facoltativo in alcuni contesti, ma includilo sempre — rende il markup inequivocabile e più facile da leggere.
Esempio 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>Indicare le combinazioni di tasti
Per rappresentare una scorciatoia con più tasti, racchiudi l'intera combinazione in un <kbd> esterno e ogni singolo tasto nel proprio <kbd> annidato. L'elemento esterno rappresenta l'input combinato come unità; ogni elemento interno rappresenta la pressione di un tasto:
<p>
Save the document with
<kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.
</p>Questo annidamento è una convenzione, non un requisito — un singolo <kbd> per tasto funziona ugualmente — ma rende esplicita la struttura di una scorciatoia e offre agganci precisi per stilizzare ogni tasto separatamente.
Combinare <kbd> con <samp>
Puoi annidare <kbd> e <samp> (output di esempio/sistema) per esprimere significati più specifici definiti dalla specifica HTML:
<kbd>dentro<samp>— input che viene restituito all'utente dal sistema, ad esempio un comando mostrato in un terminale così come il sistema lo ha ricevuto.<samp>dentro<kbd>— input che è basato su testo che il sistema mostra a schermo, ad esempio l'utente che fa clic su una voce di menu il cui testo è stato renderizzato dal sistema.
<!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>Stilizzare <kbd> come un tasto
<kbd> non ha un'aspetto visivo incorporato oltre al font monospazio, quindi aggiungere CSS rende le scorciatoie molto più leggibili. Un bordo, un po' di padding e uno sfondo chiaro fanno sì che ogni tasto assomigli a un keycap fisico. Qui la combinazione esterna mantiene l'aspetto predefinito mentre ogni tasto interno è stilizzato con 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>Il tag <kbd> non è deprecato. Puoi ottenere effetti più ricchi con le proprietà CSS font-family e border, come mostrato sopra.
Accessibilità
<kbd> non ha semantica speciale per le tecnologie assistive — i lettori di schermo non lo annunciano come "input da tastiera" e non trasmette nessun ruolo o stato. È un suggerimento presentazionale e semantico per i lettori vedenti e per le macchine, non un'etichetta accessibile.
Non fare mai affidamento su <kbd> da solo per comunicare un significato. Se una scorciatoia deve essere compresa da tutti, descrivila nel testo circostante (ad esempio, "Premi Ctrl più C per copiare") anziché dipendere dalle rappresentazioni visive dei tasti stilizzati.
Attributi
Il tag <kbd> supporta gli Attributi Globali e gli Attributi Evento.
Tag correlati
<code>— un frammento di codice informatico.<samp>— output di esempio o di sistema.<var>— una variabile o segnaposto nel codice o nell'input.