Make Sure Focus Isn’t Hidden
Ever press Tab or click a link that jumps you to part of the page, but you can’t see where you landed?
This happens more than you think, especially on modern sites with:
- Sticky headers
- Fixed chat widgets or toolbars
- Modals or overlays
- Scroll containers with overflow
If focus lands behind another UI element, users — especially keyboard and screen reader users — lose orientation.
They can’t see where they are, what’s selected, or where to go next.
That’s why WCAG 2.2 adds a new requirement:
2.4.12 Focus Not Obscured (Minimum):
When an element receives focus, it must not be hidden (partially or fully) by other content.
Good Practice
- Make sure focused elements scroll into visible view
- Avoid situations where sticky headers or overlays block focus
- Use CSS scroll helpers like
scroll-margin-* - Use JavaScript scroll adjustments if necessary
CSS Example:
:target,
:focus {
scroll-margin-top: 4rem; /* height of sticky header */
}
This ensures that when a focused element is targeted (e.g., via anchor link or Tab key), it scrolls into view below the header.
JavaScript Example (when CSS isn’t enough):
element.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
You may need this if your layout changes dynamically or if the browser doesn’t respect scroll-margin.
Watch Out For
- Sticky headers that cover anchor targets
- Modals or drawers that allow background focus
- Chat widgets or banners that overlap focused content
- Offscreen or overflow content not scrolled into view
Remember: It’s not enough that the element receives focus — it must be visibly in view.
Pro Tip
Use dev tools or screen reader simulation to tab through long pages. Try jumping to sections via in-page links (#id).
Also check:
- Form validation errors that auto-focus a hidden field
- Menu links that scroll to obscured content
- Accordions that open and scroll to a hidden title
Use scroll-margin-* for all your headings, form fields, or links that might be targeted via keyboard or hash navigation.
Do this today: Tab through long pages. Use in-page links or error summaries that move focus. When focus jumps, does the target element appear fully in view — or is it hidden behind a sticky header? If it’s hidden, use scroll-margin-top or adjust the scroll behavior.