Focus Not Obscured (Enhanced)
Stricter AAA version of 2.4.11: when an element receives focus, no part of it may be obscured by other content. New in WCAG 2.2.
What it asks
2.4.11 allows partial obscuration as long as some part of the focused element stays visible. 2.4.12 removes that allowance: the focused element must be fully visible. Tabbing onto a button must place the entire button in the viewport with nothing overlapping it — no sticky header clipping the top edge, no chat bubble clipping the bottom-right.
This is AAA and aspirational for most teams, but it’s the right target for design systems used in government, healthcare, and education, where keyboard reliability is non-negotiable.
How to meet it
- Set
scroll-padding-topandscroll-padding-bottomon the scroll container generously — slightly more than the height of every sticky element combined. - Auto-hide chat widgets when a focusable element nears their position, or move them out of the way on focus events.
- For sticky footers, consider non-sticky alternatives, or compress them on scroll so they only cover headline content, never controls.
- Audit every page with both a sticky header and a sticky footer. The “safe band” in the middle shrinks fast, especially on small viewports.
- Test at 200% browser zoom and at 400% (per 1.4.10 Reflow) — sticky elements that worked at 100% may now fill the screen.
Common failures
- Sticky header that covers the top 4px of every focus ring — fine for 2.4.11, fails 2.4.12.
- Skip-link targets that land at the very top of
<main>with focus ring partially clipped by the sticky header. - Floating “Help” buttons on bottom-right that overlap a 1px corner of focused buttons in that region.
- Promotional banners pushed in by marketing tags that aren’t accounted for in the design system’s scroll-padding tokens.
- Mobile bottom navs where Tab onto the last form field shows the field with focus ring slightly clipped at the lower edge.
Why it matters
For users with low vision who depend on the focus indicator to track their position, even a partial clip can render the indicator effectively invisible — a 2px outline with the top pixel clipped looks like a 1px line, easily mistaken for a border. The enhanced criterion treats the focus indicator as a first-class UI element that deserves its full bounding box on screen. Committing to 2.4.12 forces teams to rationalise their sticky-element budget, which often improves the layout for everyone.