Keyboard navigation means operating the entire site — including menus, forms, and interactive elements — using only the keyboard. No mouse, no touch. The primary keys are Tab (move forward), Shift+Tab (move backward), Enter/Space (activate), Arrow keys (navigate within components), and Escape (dismiss/close).
Some people navigate by keyboard because of motor disabilities that make mouse use difficult. Others use keyboard navigation temporarily — broken trackpad, assistive switch device, voice control software that maps to keyboard commands. Keyboard accessibility benefits a wider range of users than many developers expect.
Tab order
Tab order is the sequence in which elements receive focus when the user presses Tab. By default, this follows the DOM order — the order of elements in the HTML source. A logical tab order moves through the page in reading order: header → navigation → main content → sidebar → footer.
Problems arise when CSS repositions elements visually without changing the DOM order. A menu that appears at the top of the page but is placed at the bottom of the HTML means the user tabs through all the content before reaching the navigation. Or worse: elements positioned with CSS Grid or Flexbox order property create a visual order that doesn’t match the tab order, confusing keyboard users who see the focus jump unpredictably.
For navigation, the tab order should follow the visual layout: logo first, then menu items left to right, then action items (search, cart, account). Within a dropdown, child items should receive focus in the order they appear.
Focus indicators
Focus indicators — the visual outline or highlight that shows which element is currently focused — are essential for keyboard navigation. Without them, the keyboard user can’t see where they are. They press Tab and nothing visible changes, so they press Tab again, and again, not knowing which element is active.
The browser provides a default focus indicator (usually a blue outline), but many themes remove it for aesthetic reasons with outline: none. This is one of the most common and most damaging accessibility mistakes. Removing the focus indicator makes keyboard navigation impossible.
A good focus indicator is visible on all backgrounds, doesn’t rely only on color (for color-blind users), and is distinctive enough to spot at a glance. A 2px solid outline in a contrasting color works well. Some sites use a combination of outline and background color change for extra visibility.
Opening and closing dropdowns
On desktop, most menus use hover to open dropdowns. This doesn’t work for keyboard users because there’s no keyboard equivalent of hover. The solution: make the parent menu item a button (or link with role="button") that opens the dropdown on Enter or Space.
Once the dropdown is open, the user should be able to:
- Tab through the dropdown items
- Press Escape to close the dropdown and return focus to the trigger
- Press Tab past the last dropdown item to move to the next top-level menu item
If Escape doesn’t work, the user is trapped in the dropdown — they can only exit by pressing Tab through all the items. If focus doesn’t return to the trigger after closing, the user loses their place in the menu and has to start over.
Focus trapping in modal menus
Modal menus — full-screen overlays, slide-out panels — require special focus management. When a modal menu opens, focus should move to the first focusable element inside the menu. Tab should cycle within the menu (not escape to the page behind it). Escape should close the menu and return focus to the trigger element.
This is called focus trapping, and it’s necessary for modal content. Without it, the keyboard user Tabs out of the modal into the page behind it, can’t see what’s focused (because the modal overlay is covering it), and can’t find their way back.
With Navi+, slide menus and full-screen menus should implement proper focus trapping — locking Tab within the menu when it’s open and restoring focus to the trigger when it closes.
Arrow key navigation within menus
For complex menus (mega menus, multi-level dropdowns), the WAI-ARIA menu pattern recommends arrow key navigation: Left/Right arrows move between top-level items, Up/Down arrows move within a dropdown. This is an enhancement beyond basic Tab navigation and makes large menus faster to navigate.
Not all ecommerce menus implement arrow key navigation, and it’s not strictly required — Tab-based navigation works for most menus. But for mega menus with many items across multiple columns, arrow key support significantly improves the keyboard experience.
This article is part of the larger guide on Accessible navigation: building for screen readers and keyboard users.