<kbd>

Definition

The HTML <kbd> element is used to define keyboard input, or text entered through a physical or virtual keyboard. It is typically used to indicate that certain text represents keyboard input or keyboard commands, such as "Press the Enter key" or "Press Ctrl+C to copy".

When used, the content of the <kbd> element is typically displayed in a monospace font and wrapped in a box or other styling to differentiate it from other text on the page. The element itself does not carry any semantic meaning, but is used to indicate to the user that the enclosed text represents keyboard input.

The use of the <kbd> element can improve accessibility and user experience, as it clearly communicates to the user what actions they need to take using the keyboard.

Examples

Here's an example of how the <kbd> element can be used:

To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd>.

This would render as:

"To save the document, press Ctrl+S."

Attributes

This element only includes the global attributes.

Best Practices

• The <kbd> element should only be used to indicate keyboard input. Don't use it to mark up other types of content, as this can lead to confusion for users and affect accessibility.
• Don't use the <kbd> element just for styling or decoration. Only use it to markup text that represents actual keyboard input.
• When indicating a keyboard shortcut, it's often helpful to include additional elements like <code> or <pre> to indicate code snippets and ensure proper formatting.
• The <kbd> element should be styled appropriately to differentiate it from other text on the page. This can be achieved through the use of font styles, background colors, borders, or other CSS properties.
• When using the <kbd> element, ensure that it is accessible to users of assistive technology, such as screen readers. This can be achieved by using appropriate aria-labels or aria-labelledby attributes, providing additional context when necessary.
• When using the <kbd> element to indicate a keyboard shortcut, use the appropriate keys for the platform and browser being used. For example, use "Ctrl" for Windows and Linux, and "Command" for Mac OS X.

Accessibility Considerations

• When using the <kbd> element, ensure that the associated text is clear and descriptive. This is particularly important for users of assistive technology, such as screen readers, who rely on text descriptions to understand the content.
• In some cases, it may be necessary to provide additional context or instructions to users, particularly if the keyboard input is complex or requires multiple steps. This can be achieved through the use of aria-label or aria-labelledby attributes, or by providing additional text outside the <kbd> element.
• The <kbd> element should be styled to ensure adequate contrast between the text and its background. This is particularly important for users with low vision or color blindness, who may have difficulty distinguishing between similar colors.
• When using the <kbd> element to indicate a keyboard shortcut, ensure that the shortcut is accessible and intuitive for all users. This may require using different shortcuts for different platforms or browsers.
• Before publishing content that uses the <kbd> element, it's important to test it with a variety of assistive technologies, such as screen readers and keyboard-only navigation, to ensure that it is accessible to all users.

Browser Compatibility