Focus Management Deep Dive — Introduction

In this tutorial, you will learn about Focus Management Deep Dive. We cover key concepts, practical examples, and best practices to help you master this topic.

Focus management is the practice of programmatically controlling keyboard focus to ensure keyboard and screen reader users always know where they are and can navigate predictably.

In this tutorial, you'll learn the fundamentals of advanced Focus Management.

What You'll Learn

By the end of this lesson, you'll understand why focus management is critical, the common patterns for moving focus, and the consequences of poor focus management.

Why It Matters

Poor focus management is the number one cause of keyboard Accessibility failures. A modal that does not trap focus or a SPA that does not focus the new page heading disorients keyboard users.

Real-World Use

Doda Browser uses advanced focus management in its tabbed interface. Durga Antivirus Pro routes focus to scan result summaries when background scans complete.

Focus Management Decision Tree

flowchart TD
  A[Component lifecycle event] --> B{What changed?}
  B -->|Modal opened| C[Trap focus in modal]
  B -->|Modal closed| D[Return focus to trigger]
  B -->|Page navigated| E[Focus page heading]
  B -->|Menu opened| F[Focus first menu item]
  B -->|Error occurred| G[Focus error message]
  C --> H[Use focus trap]
  D --> I[Store and restore focus]
  E --> J[Focus h1 or skip link]
  F --> K[Roving tabindex pattern]
  G --> L[Focus with role=alert]

Core Focus Management Rules

1. When something opens, focus moves to it.
2. When something closes, focus returns to what opened it.
3. When content updates, focus moves to the update.
4. Never leave the user without a clear focus location.

Common Mistakes

• Not moving focus when content changes: Users do not know something happened.
• Moving focus without a reason: Unnecessary focus moves confuse users.
• Focusing non-interactive elements: Users expect focusable elements to be actionable.
• Not returning focus after dismissal: Users are stranded at an unexpected location.
• Using autofocus on page load: Users lose their reading position.

Practice and Challenge

1. What is focus management? The practice of programmatically controlling keyboard focus.

2. What is the number one cause of keyboard accessibility failures? Poor focus management.

3. Where should focus go when a modal opens? To the first focusable element inside the modal.

4. Where should focus return when a modal closes? To the element that opened the modal.

5. Challenge: Identify three focus management issues on a web application you use.

FAQ

Mini Project

Audit a web application for focus management issues. Document each issue with the page, trigger, expected behavior, and actual behavior.

What's Next

Continue to Focus Ring to learn about the outline indicator and its importance.