ARIA keyboard shortcuts demo

Theme cycle: DEFAULT → COLOR-SAFE → HIGH CONTRAST

Enable demo shortcuts

Demo shortcuts are Ctrl+Alt+S (Save) and Ctrl+Alt+K (Search). On macOS, ⌘+⌥ also works. This avoids overriding common browser defaults like Ctrl+S.

BAD: shortcuts exist, but aren’t discoverable no hints • no aria-keyshortcuts

Try focusing this card, then press the shortcut keys. Sighted users won’t see the shortcut, and assistive tech won’t get metadata.

(no actions yet)

BETTER: visible hints + aria-keyshortcuts hints • metadata

The hint is visible, and the button carries aria-keyshortcuts so assistive tech can expose it.

(no actions yet)

Show current aria-keyshortcuts attributes

ARIA uses key tokens like Control, Alt, Shift, Meta — not “Ctrl” / “Cmd”.

#goodSave:
#goodSearch:

Last shortcut seen (visible)

This box is just to confirm what the page detected. (It’s not an ARIA live region.)

(none yet)

Quick checklist

Keep shortcut hints visible (don’t hide them in a tooltip).
If you implement shortcuts, add aria-keyshortcuts on the control they activate.
Don’t override common browser/system shortcuts (this demo uses Ctrl+Alt).
Make sure the hint, aria-keyshortcuts, and key handling all match.