Keyboard shortcuts that make your site feel grown-up

The little things separate a hobby page from a real product. One of the biggest: a visitor presses ⌘ K and a search box jumps up — no hunting for a magnifying glass. It's a few lines of code, and your agent can add it for you. Here's the pattern, and the conventions worth following.

Why shortcuts matter

Keyboard shortcuts say "someone who knows what they're doing built this." They make frequent actions instant for power users, they keep hands off the mouse, and — done right — they help people who can't use a mouse at all. On this site, pressing ⌘ K (or Ctrl K) opens the Academy command palette; / does the same; Esc closes it. Try it now, then come back.

The conventions people already expect

Don't invent new shortcuts where common ones exist — match what people's fingers already know:

We did exactly this on this site

The Academy's own command palette is the worked example. Its rules are worth copying:

• ⌘ K / Ctrl K always opens it — on a Mac or on Windows/Linux, one handler covers both.
• / opens it too — but never while you're typing. If the cursor is in an input, a textarea, or any editable field, / just types a slash like normal. (Nothing more annoying than a search box hijacking the key you meant to type.)
• ↑ / ↓ move, Enter goes, Esc closes.
• It's a real dialog. The panel is marked up as role="dialog" with aria-modal="true", focus moves into it on open and is trapped (Tab and Shift+Tab cycle within it), and on close focus returns where it was.

Accessibility — the four rules that keep it kind

• Don't trap the keyboard the wrong way. A modal should trap Tab inside itself while open — but Esc must always get you out. Never trap someone with no exit.
• Respect inputs. A single-key shortcut like / or ? must do nothing when the person is typing in a field — check the focused element first.
• Show the hints. Put the shortcut next to its button (a faint ⌘K in the search box), and offer a ? help panel. A shortcut nobody can discover helps nobody.
• Announce it to screen readers. Use the real roles (role="dialog", aria-modal, an aria-label) so assistive tech knows a dialog opened.

Ask your agent for it

You don't write this by hand. Describe what you want and let the agent build it the proven way — copy this:

Add a keyboard-shortcut layer to my site like Flowsmith Academy's:
- ⌘K / Ctrl+K opens a search/command palette; "/" also opens it but ONLY
  when the user isn't typing in an input/textarea/contenteditable.
- Arrow keys move through results, Enter selects, Esc closes.
- The palette is a real modal: role="dialog", aria-modal="true", focus
  moved in and trapped (Tab/Shift+Tab cycle), focus restored on close.
- Show a faint "⌘K" hint in the search box, and a "?" help panel listing
  the shortcuts. Respect prefers-reduced-motion. No external libraries.Copy

Where next