Keyboard support is not an accessibility checkbox bolted on at the end — for power users it is the fastest interface you can ship. These snippets implement the patterns that make an app keyboard-complete: a command palette on Ctrl+K, arrow-key movement through menus and grids, Escape to dismiss, Enter to commit, and focus that returns to where it came from.

They follow the ARIA authoring practices for each widget, which is what makes the same code serve both a power user and a screen-reader user.

Roving tabindex, the pattern behind every menu and toolbar

A group of related controls — a menu, a toolbar, a grid of cells — should expose exactly one stop in the page's tab order, with arrow keys moving focus between the items inside it. That is roving tabindex: the currently active item gets tabindex="0", every sibling gets tabindex="-1", and arrow-key handling moves the "0" between them. Without it, a fifty-item menu costs fifty tab presses to get past; with it, one tab press enters the group and arrows do the rest.

Focus traps that behave like a real dialog

Opening a modal moves focus inside it and must stop Tab from ever reaching content underneath — wrapping Tab from the last focusable element back to the first, and Shift+Tab the other way. Just as important is what happens on close: focus has to return to the exact element that opened the dialog, not to the top of the page, or a keyboard user loses their place every time they dismiss something. The native <dialog> element with showModal() handles most of this natively, which is why several snippets here build on it rather than reimplementing the trap by hand.

A command palette is a filtered, keyboard-driven list

Ctrl+K opening a searchable list, arrow keys moving a highlighted selection, and Enter running the highlighted command is now an expected pattern in developer-facing tools, and it scales to far more commands than any menu bar could expose. The implementation detail that makes it feel fast is filtering on every keystroke against a precomputed searchable index rather than re-scanning a DOM tree each time.

Discoverability matters as much as implementation

A shortcut nobody knows exists provides no value. Hint chips showing the relevant key next to a control, and a shortcuts overlay reachable with "?" or a help menu, are what turn a keyboard-complete interface into one power users actually discover and adopt rather than one that only rewards people who already read the source.

Real-world uses

Common Use Cases

Command palettes in web apps

Ctrl+K is now an expected affordance in developer-facing products, and it scales better than any menu.

Modal and drawer focus management

Trapping focus inside an open dialog and restoring it on close is what stops a keyboard user from getting lost behind the overlay.

Comboboxes and select menus

Arrow keys, type-ahead and Enter are how these are actually operated once someone uses them more than twice.

Learning the ARIA patterns

Each snippet implements a documented authoring practice, so the roles and key handling are worth copying verbatim.

Got questions?

Frequently Asked Questions

A pattern where a group of controls exposes exactly one tab stop: the active item has tabindex="0" and every sibling has tabindex="-1", with arrow keys moving the zero between them. It is what stops a fifty-item menu from requiring fifty tab presses to get past.

Find the focusable descendants, move focus to the first on open, and wrap Tab from the last back to the first (and Shift+Tab the other way). On close, restore focus to the element that opened the dialog. The native <dialog> element with showModal() does most of this for you and is worth preferring.

Anything the browser or assistive tech owns: Ctrl+T, Ctrl+W, Ctrl+L, Ctrl+F in most contexts, and single-letter shortcuts while a text field has focus. Check event.target before acting on a bare-letter shortcut, or you will hijack typing.

No. Every snippet is plain HTML, CSS and vanilla JavaScript that runs in any page — a static file, a WordPress theme, a Rails view, anything. When you do want a framework version, the editor exports each snippet as a React component, a React + Tailwind component, a standalone Tailwind HTML file, a Vue 3 single-file component or an Angular standalone component.

Yes — copy, modify and ship them in personal or commercial work, with no attribution required and no licence to track.

Yes. Every snippet opens in a live editor with separate HTML, CSS and JS panels and a preview that updates as you type. Check it at mobile, tablet and desktop widths, then copy the code or export it in your framework of choice.

Tags that appear alongside Keyboard Navigation

Accessibility SVG Forms & Validation CSS Animation Touch Gestures CSS Grid Games Glassmorphism All tags →

Loading…