Managed Focus

Why It Matters

• Keyboard users lose their place. When a dialog opens and focus stays on the button that triggered it, the user has to tab through the entire page to reach the dialog content. That is not just inconvenient — on a complex page, it can mean dozens of extra tab presses.
• Screen readers miss content changes. If focus is not moved to newly loaded content, screen reader users may not even know that anything changed. They continue reading from wherever they were, unaware of the new section that appeared elsewhere on the page.
• Focus traps work both ways. Modals need focus trapped inside them so users do not accidentally interact with hidden content behind the overlay. But when the modal closes, focus must return to the element that opened it — otherwise users are dropped at the top of the page.
• It is an accessibility requirement. WCAG guidelines specify that focus must be managed for dynamic content changes. Failing to manage focus creates barriers that make your site difficult or impossible for some users to navigate.

How to Implement It

1. Move focus when modals open. When a dialog or overlay appears, move focus to the first interactive element inside it (or to the dialog container itself if it has a heading). When it closes, return focus to the element that triggered the opening.
2. Focus newly loaded content. When an AJAX call loads new content into the page, move focus to the new content container or its heading. This tells users exactly where to find the update.
3. Manage single-page-app route changes. When navigating between views in a single-page application, move focus to the main content area or the page heading. Without this, users hear and see nothing after clicking a link.
4. Use tabindex="-1" for non-interactive targets. Elements like headings and containers are not focusable by default. Adding tabindex="-1" makes them programmatically focusable without adding them to the normal tab order.
5. Test with keyboard only. Put your mouse away and navigate your site using only the Tab key, Enter, Escape, and arrow keys. Every dynamic change should land focus exactly where you would expect.

Common Mistakes

• Moving focus but not returning it. Focus goes to the modal when it opens, but when it closes, focus resets to the top of the page. Always store a reference to the triggering element and return focus to it when the interaction ends.
• Focusing invisible elements. Setting focus on an element that is off-screen, hidden, or behind an overlay confuses users. Make sure the focus target is visible and within the current view.
• Using tabindex="0" when "-1" is correct. Adding tabindex="0" to a heading or container puts it in the normal tab order permanently. Use tabindex="-1" when you only need to move focus programmatically without altering the tab sequence.
• Ignoring focus on route changes. Single-page apps are the biggest offenders. Clicking a navigation link loads new content but focus stays on the old link, leaving keyboard users completely disconnected from the updated view.