Focus Management

Focus management is the practice of programmatically controlling where keyboard
focus is placed as users interact with dynamic content. When content changes,
appears, or disappears on a page, focus must be moved deliberately to ensure
keyboard and screen reader users remain oriented.
[1]

---

When to move focus

Focus should be moved programmatically in the following situations:

• Opening a modal dialog — focus must move into the dialog
• Closing a modal dialog — focus must return to the element that triggered it
• Loading new page content — focus should move to a relevant heading or region
• Revealing an error message — focus or announcement should direct users to the error
• Completing a multi-step form — focus should move to the next step heading

[2]

---

tabindex values

Value

Behaviour

tabindex="0"

Adds element to natural tab order

tabindex="-1"

Removes from tab order but allows programmatic focus via .focus()

tabindex="1+"

Overrides natural tab order — avoid

Use tabindex="-1" on containers like dialog or section elements when you need
to focus them programmatically but do not want them in the tab sequence.

---

Focus trapping

Inside a modal dialog, focus must be trapped — Tab and Shift+Tab should cycle
only through interactive elements within the dialog. Focus must not escape to
the page behind.
[3]

To implement a focus trap:

1. On dialog open, record the triggering element
2. Move focus to the first focusable element inside the dialog
3. Intercept Tab and Shift+Tab to keep focus inside
4. On dialog close, return focus to the recorded triggering element

---

Focus visibility

Every element that receives focus must have a visible focus indicator. Do not
use outline: none in CSS without providing an alternative focus style.
[1]

WCAG 2.2 introduced Success Criterion 2.4.11 (Focus Appearance) which requires
the focus indicator to meet minimum size and contrast requirements.

---

Common mistakes

Losing focus on modal close. If the triggering element no longer exists when
a dialog closes, move focus to a logical nearby element such as a page heading.

Moving focus unnecessarily. Only move focus when content changes in a way
that would disorient users. Avoid moving focus on every keystroke or minor UI
update.

Focusing a non-interactive container. Adding tabindex="-1" to a div and
calling .focus() works, but the element will have no accessible role. Prefer
focusing a heading or the first interactive element inside the region.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.3: Focus Order. https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html ↑
2. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.11: Focus Appearance. https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html ↑
3. W3C Web Accessibility Initiative. ARIA Authoring Practices Guide — Dialog Pattern. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ ↑