The <kbd> Element
As defined in the HTML Living Standard, the <kbd> element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).
To copy text, press Ctrl + C.
Type help to see a list of commands.
<p>Press <kbd>F12</kbd> to open DevTools.</p>
View HTML Living Standard: The kbd element
Nesting Patterns
The <kbd> element has specific semantic rules when nested:
- Representing a shortcut: Nesting
<kbd>elements inside a parent<kbd>represents an actual key combination or sequence. - Representing input from a menu: When nested inside a
<samp>element, it represents input as echoed back by the system. - Representing specific technical input: You can nest a
<code>element inside to specify that the input is a technical term or piece of code.
<!-- Nested Shortcut Example -->
<kbd><kbd>Shift</kbd>+<kbd>Tab</kbd></kbd>
Accessibility considerations
Using the <kbd> element ensures that user instructions are programmatically identifiable.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By identifying keyboard keys with <kbd>, you allow users of specialized assistive technology (like alternative input devices or braille displays) to distinguish between prose and instructions for physical interaction. While most screen readers do not announce "key" for each tag, the semantic marker provides a foundation for custom stylesheets or extensions that can highlight these instructions for users with cognitive or visual impairments.
Styling Best Practices
Following SMACSS Module Rules, it is common practice to style the <kbd> element to look like a physical keycap. This provides a strong visual cue to the user that the text represents an interaction.
A11y Tip: Clarity in Instructions
Always ensure that the symbols used within a <kbd> tag are standard. For example, use "Enter" instead of "↵" unless the symbol is common in the target user's locale. This reduces cognitive load and ensures screen readers announce the intended action correctly.