Offer keyboard shortcuts and a command palette

How to do it

Open the palette with Ctrl+K or Cmd+K, and build it as a combobox, as Build search-as-you-type fields as a combobox says. Take its entries from the same list of actions as the menus, so the two never differ. Give shortcuts a modifier key, or let people turn single-key shortcuts off, as Never take over single keys requires. Never reuse a browser or screen reader shortcut. Show each shortcut next to its menu item and in aria-keyshortcuts.

Examples

JavaScript example

export const ACTIONS = [
  { id: 'invoice.new', label: 'New invoice', shortcut: 'Control+Alt+N', run: openNewInvoice },
  { id: 'search', label: 'Search', shortcut: 'Control+K', run: openPalette },
];
const hasModifier = shortcut => /^(Control|Alt|Meta)\+/.test(shortcut);

Python example

def test_every_shortcut_has_a_modifier():
    for action in load_actions():
        assert action["shortcut"].split("+")[0] in {"Control", "Alt", "Meta"}, action["id"]

How to check

A test reads the action list. Every action appears in the palette, and every shortcut appears on the help screen. No shortcut is a single character without a modifier, unless a setting turns it off. A browser test opens the palette with the keyboard and runs one action without the mouse.

Sources

• WCAG 2.2 – 2.1.4 Character Key Shortcuts
• WAI-ARIA 1.2 (aria-keyshortcuts)

Related rules

• APP-23 Build search-as-you-type fields as a combobox in Web app interface
• AXS-12 Never take over single keys in Accessibility