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.
78.2% of the top one million home pages had insufficient focus indicator styles or removed the default browser focus outline entirely.
How to fix it
- Never remove the default focus outline (outline: none) without replacing it with an equally visible custom focus style using :focus-visible.
- 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.
- 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.
- 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
Why do some sites remove the focus outline?
Designers often remove the default browser focus ring for aesthetic reasons using outline: none in CSS resets. This is harmful to keyboard users and should always be replaced with a custom :focus-visible style.
What is the difference between :focus and :focus-visible?
:focus triggers on any focus event (including mouse clicks), while :focus-visible only triggers when the browser determines focus should be visible (typically keyboard navigation). Use :focus-visible for custom focus styles.
Where should focus go when a modal opens?
Focus should move to the first focusable element inside the modal (or the modal container itself with tabindex="-1"). When the modal closes, focus should return to the element that opened it.
Related guides
Keyboard Navigation
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached...
Read more → AccessibilityColor 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:...
Read more → AccessibilityARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elemen...
Read more →Scan your site for accessibility issues
Find and fix these issues automatically with eiSEO.
50 pages free · No credit card · Results in under 2 minutes