Keyboard shortcuts help + remap — demo

Keyboard shortcuts only help if people can discover them. This demo shows a simple help dialog + optional remapping, while keeping the shortcut hints visible and providing aria-keyshortcuts metadata on controls.

Theme cycle: DEFAULT → COLOR-SAFE → HIGH CONTRAST
GOOD pattern

Try: Ctrl+Alt+K to open shortcuts help. (Or click the button.)

Actions

Shortcut:
Shortcut:
Shortcut:
Shortcut:

This demo uses Ctrl+Alt (and on macOS, ⌘+⌥) to reduce browser collisions.

Status (visible)

A polite live region announces the last action (without moving focus).

(no actions yet)
Note editor (fake) type here to confirm shortcuts don’t steal keys inside inputs

Shortcuts are ignored while typing in an input.

BAD pattern

If shortcuts are only in a hidden help page (or not listed at all), many users will never learn them. And if you don’t provide metadata (like aria-keyshortcuts), assistive tech can’t expose shortcuts reliably.