KBD

How the KBD works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.

FreeReact and Vue

AAWCAG 2.2 target

1keyboard interactions

Kbd renders the native <kbd> element, so the key is marked up as keyboard input even without styles. It is not interactive. What it does not do on its own is say symbols aloud: ⌘ and arrows need words for screen readers.

Keyboard#

Tab

Passes over the key cap: it is text, not a control.

Semantics#

<kbd>

One element per key. Kbd Group places keys side by side with a "+" between them, not nested.

Always

aria-label

Set to "left arrow" and so on. On a <kbd>, which has no role, many screen readers ignore aria-label.

Arrow only

aria-hidden

The chevron SVG is decorative.

Arrow glyph

visually hidden text

Not built in. Add "Command" beside ⌘ so it isn't read as "place of interest" or skipped.

Symbols

Colour contrast#

Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.

4.5:1

Label · Flat, Raised

Satoshi Medium 14 in #6d6d6d on the white cap measures 5.17:1. Group labels match; the "+" separator in #8f8f8f is 3.23:1.

WCAG 1.4.3 Contrast (Minimum) ↗

Not required

Key edge · Flat, Raised

The cap's stroke and shadow are decoration, not a control's boundary.

WCAG 1.4.11 Non-text Contrast ↗

Motion#

Kbd does not animate.

Checklist#

Give every symbol a readable name in visually hidden text: Command, Shift, Option, Up arrow.

Write shortcuts for the platform: ⌘ on Mac, Ctrl elsewhere.

Make sure the shortcut works. A key cap describes a shortcut; it does not register one.

The "+" separator is about 3.2:1. It is a symbol between keys, but darken it if it is the only thing joining them.