Role and semantics
Section titled “Role and semantics”Kbd renders the HTML <kbd> element. In a combination each key is a nested <kbd>. Symbols are hidden with aria-hidden; their names are read from visually hidden text.
Keyboard
Section titled “Keyboard”Kbd takes no focus and has no keyboard interaction.
It takes no focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
['mod', 'K'], Apple |
“Command K” |
['mod', 'K'], other |
“Control K” |
['up'] |
“Up arrow” |
Contrast
Section titled “Contrast”color-text-subtle text has at least 4.5:1 contrast on color-surface-layer-1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Kbd meets it | What the product team does |
|---|---|---|
| 1.1.1 Non-text content | Symbols have a localised spoken name. | Do not add symbols yourself; use a named key. |
| 1.3.1 Info and relationships | The <kbd> element. |
Do not give the shortcut only visually. |
| 2.1.4 Character key shortcuts | It only displays. | Make single-character shortcuts possible to turn off. |