Micro-demo Keyboard shortcuts help + remap demo
Checklist
- Make shortcuts discoverable: provide a dedicated “Keyboard shortcuts” help screen (dialog or page) that’s easy to find.
- Keep hints visible: show the shortcut next to the relevant action (or in a consistently available panel).
- Provide metadata: add
aria-keyshortcutson the control that the shortcut activates (and keep it in sync with the handler and the visible hint). - Handle collisions: avoid browser/OS defaults (e.g.,
Ctrl+S). Consider using a consistent modifier scheme and warn/block collisions within your app. - Don’t hijack typing: ignore shortcuts while focus is in an input/textarea/contentEditable area.
- Consider remapping: support per-user remaps when feasible, with a clear reset-to-defaults action.
- Announce results: for actions like “Saved”, use a polite status message (
role="status"/aria-live="polite") instead of moving focus.