Kbd

A literal keyboard key or shortcut, styled as a key cap.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<span>Press <kbd class="wsu-kbd">Esc</kbd> to close an open drawer or dialog</span>

Why it works this way

• <kbd> already carries the right semantics on its own, so this exists only to give it the key-cap look every consumer path shares.
• Nothing here is interactive, and none of the target-size rules apply to a label nobody presses.

Accessibility

• A key that carries the instruction, the Esc in "Press Esc to close", is the information itself and must never be aria-hidden: hiding it removes the one thing the sentence exists to say (1.3.1).
• The app bar's own hotkey glyph beside the search field is the one legitimate aria-hidden key cap, because the field's accessible description already says "Press Command or Control plus K" and the glyph only repeats it. It carries .wsu-app-bar__search-hint rather than .wsu-kbd for exactly that reason, so the two are never confused with one another in the markup contract and a real key cap can never be silently hidden by sharing a class with a decorative one.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-kbd.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	kbd	none recorded	1