Focus Management
What is focus management and why do users lose their place on the page?
What is focus management?
Focus management controls which element on the page currently receives keyboard input, indicated by a visible focus ring or outline. Proper focus management means interactive elements show a clear visual indicator when focused, focus moves logically through the page, and focus is programmatically moved to the right place when content changes (e.g., opening a modal should move focus into it).
Focus management controls which element on a page currently receives keyboard input and ensures a visible focus indicator is displayed. Proper focus management means interactive elements show a clear outline when focused, focus moves logically through the page, and focus is programmatically moved when content changes such as opening a modal.
Why does focus management matter?
Keyboard users need to see exactly where they are on the page at all times. When CSS resets remove the default browser focus outline (outline: none) without providing a replacement, keyboard users lose track of their position. Poor focus management in dynamic content — like modals, single-page app route changes, or ajax-loaded sections — leaves focus stranded on invisible or irrelevant elements.
Key statistics
78.2% of the top one million home pages had insufficient focus indicator styles or removed the default browser focus outline entirely.
Source: WebAIM Million
How to fix it
-
1
Never remove the default focus outline (outline: none) without replacing it with an equally visible custom focus style using :focus-visible.
-
2
Use :focus-visible instead of :focus for custom styles so mouse users do not see focus rings on click, but keyboard users always see them.
-
3
When opening a modal or dialog, programmatically move focus to the first interactive element inside it. When closing, return focus to the element that triggered it.
-
4
After dynamic content loads (AJAX, SPA route changes), move focus to the new content or announce it with an ARIA live region so keyboard users are not left stranded.
Frequently asked questions
Related topics
Keyboard Navigation
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached and operated using only the keyboard (typically via the Tab, Enter, Space, and arrow keys). This is a fundamental accessibility requirement because many users cannot use a mouse.
Color Contrast
Color contrast is the difference in luminance between foreground text and its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Insufficient contrast makes content difficult or impossible to read for users with low vision, color blindness, or those viewing screens in bright sunlight.
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.