Focus Management / Focus Indicator

Focus management is the practice of programmatically moving keyboard focus between elements when the UI changes (e.g., opening a dialog, loading new content, revealing a menu). A focus indicator is the visible highlight or outline around the element that currently has keyboard focus. Both are critical for keyboard and screen reader users. WCAG 2.2 introduced Focus Not Obscured (AA) and Focus Appearance (AAA) to strengthen requirements.

Category: Accessibility (also: Web Development, UX)

Author: Atomic Glue Team

## Definition

Focus management refers to the developer's responsibility to ensure keyboard focus moves to the correct element when the user interface changes state. This includes moving focus into a newly opened dialog or modal, returning focus to the triggering element when the dialog closes, moving focus to the first new element after a dynamic content update, and preventing focus from leaving the page (focus trap) in modals and slide-out panels. A focus indicator is the visible styling (typically an outline, ring, or highlight) applied to the element that currently has keyboard focus. WCAG requires that the focus indicator be visible (WCAG 2.4.7, Level AA) and, under WCAG 2.2's new criteria, that it not be fully obscured by other elements (2.4.11 Focus Not Obscured, Level AA). The AAA-level 2.4.13 Focus Appearance specifies that the focus indicator must be at least 2 CSS pixels thick and have at least 3:1 contrast against the adjacent background colours.

## Why focus management matters

When a sighted user opens a modal dialog using a mouse, their visual attention moves to the dialog. A keyboard user needs the same experience, but the browser does not move focus automatically. Without programmatic focus management, the user tabs and discovers the next focusable element is still behind the now-visible overlay, or worse, they cannot tab out of the overlay at all (or can tab out but not back in). Poor focus management is one of the most frustrating barriers for keyboard and screen reader users. It can make a site completely unusable.

## Common focus management patterns

When a modal dialog opens: store the current focus, then move focus to the first focusable element inside the dialog (or the dialog element itself if it has role="dialog" and tabindex="-1"). Trap focus within the dialog so Tab cycles inside it. When the dialog closes: return focus precisely to the element that opened it. When new content loads via AJAX or SPA navigation: move focus to the top of the new content region, typically using a heading as the target. When a menu or disclosure widget expands: move focus to the first menu item or the expanded content. When a menu closes: return focus to the menu trigger. Neglecting any of these steps leaves keyboard users lost without a visual frame of reference.

## Designing effective focus indicators

The browser default focus ring (a thin dotted outline or blue glow) is often low contrast or obscured by a site's visual design. Many design systems remove the focus outline entirely using CSS reset rules such as outline: none. This is a WCAG violation. The focus indicator must be visible, high contrast, and large enough to be noticed. A solid 2px to 4px outline with a colour that contrasts against both the element background and the page background is recommended. Do not rely solely on a colour change (e.g., turning a blue link darker blue) because that fails for users with colour vision deficiencies. WCAG 2.2's 2.4.13 Focus Appearance (AAA) sets a concrete bar: at least 2px thick and 3:1 contrast against adjacent colours.

## In code

/* Good: visible, high-contrast focus indicator */
*:focus-visible {
  outline: 3px solid #FFBF00;
  outline-offset: 2px;
}

/* Bad: removing focus indicator */
*:focus {
  outline: none; /* Violates WCAG unless replaced with something visible */
}

/* JavaScript: focus management for a modal */
function openModal(modalEl, triggerEl) {
  modalEl.previousFocus = triggerEl;
  modalEl.classList.add('open');
  modalEl.focus(); /* Move focus into the modal */
  trapFocus(modalEl); /* Keep Tab cycling inside */
}

function closeModal(modalEl) {
  modalEl.classList.remove('open');
  modalEl.previousFocus.focus(); /* Return focus to trigger */
}

## Common questions

Q: Can I use CSS outline: none if I replace it with something else?

A: Yes, as long as the replacement is at least as visible as the browser default. Use outline or box-shadow with a high-contrast colour and sufficient thickness. The :focus-visible pseudo-class is preferred over :focus because it only applies the ring when the user is navigating by keyboard, not when they click with a mouse.

## Key takeaways

• Focus management moves keyboard focus to the right place when the UI changes.
• Every modal, dialog, and dynamic content update must manage focus.
• Focus indicators must be visible, high contrast, and at least 2px thick.
• Never remove the focus outline without a visible replacement.
• WCAG 2.2 added Focus Not Obscured (AA) and Focus Appearance (AAA).

## Related entries

• [Keyboard Navigation](atomicglue.co/glossary/keyboard-navigation)
• [ARIA](atomicglue.co/glossary/aria)
• [Accessible Forms](atomicglue.co/glossary/accessible-forms)
• [WCAG (2.1, 2.2)](atomicglue.co/glossary/wcag)

Last updated July 2026. Permalink: atomicglue.co/glossary/focus-management-focus-indicator