TemplateFREE⏱️ 45-90 minutes
Keyboard Focus Management Template
Design keyboard focus management patterns for interactive components including modals, menus, tabs, and single-page applications.
Updated 2026-03-05
Keyboard Focus Management
| # | Item | Category | Priority | Owner | Status | Notes | |
|---|---|---|---|---|---|---|---|
| 1 | |||||||
| 2 | |||||||
| 3 | |||||||
| 4 | |||||||
| 5 |
#1
#2
#3
#4
#5
Edit the values above to try it with your own data. Your changes are saved locally.
Get this template
Choose your preferred format. Google Sheets and Notion are free, no account needed.
Frequently Asked Questions
What is the difference between a focus trap and a keyboard trap?+
A focus trap is intentional: it keeps focus inside a modal dialog so the user cannot accidentally Tab into background content. A keyboard trap is a bug: the user gets stuck in a component and cannot Tab out at all, even by pressing Escape. Modals should trap focus. Everything else should not. If a user can Tab into a component, they must be able to Tab out of it. The [WCAG audit template](/templates/wcag-audit-template) covers WCAG 2.1.2 (No Keyboard Trap) as a Level A criterion.
Should custom focus indicators replace the browser default?+
Yes, if the default is insufficient. Many browsers show a thin dotted outline that is nearly invisible on some backgrounds. Replace it with a custom `:focus-visible` style that provides a 3:1 contrast ratio and is at least 2px wide. Use `:focus-visible` rather than `:focus` so mouse users do not see the indicator on every click. Never remove focus indicators without providing a replacement.
How do we handle focus in virtualized lists?+
Virtualized lists (those that only render visible items in the DOM) create a focus challenge: items that scroll out of view are removed from the DOM, which can cause focus to jump to `<body>`. Maintain a reference to the focused item's index. When the user scrolls and the focused item is re-rendered, restore focus to it. Use `aria-activedescendant` as an alternative to moving DOM focus, so the list container stays focused while the "active" item is tracked by ID.
What about focus management on mobile?+
Mobile devices do not have a Tab key, so focus management is driven by swipe gestures (for screen reader users) and touch interaction. The principles still apply: focus should move to newly opened content, dismissed content should not leave focus in an orphaned state, and the reading order should match the visual order. For mobile web, ensure that `tabindex` values are correct so TalkBack and VoiceOver swipe navigation follows a logical order. The [accessibility audit template](/templates/accessibility-audit-template) includes mobile-specific test scenarios.
How do we manage focus in React or other SPA frameworks?+
React applications need explicit focus management because the virtual DOM reconciliation does not automatically move focus. Use `useRef` to store references to elements that should receive focus, and call `ref.current.focus()` after state changes (inside `useEffect`). For route changes, use a combination of `document.title` updates and moving focus to the main content heading. Libraries like `react-aria` and `reach/router` provide built-in focus management for common patterns.
Explore More Templates
Browse our full library of PM templates, or generate a custom version with AI.