Level AAAOperableNew in 2.2
2.4.12

Focus Not Obscured (Enhanced)

The strict version: when you tab to something, no part of it may be hidden by sticky headers, banners, or chat widgets.

In plain English

When someone tabs through your page with a keyboard, the thing they land on has to be visible. The AA version (2.4.11) is satisfied if any part of it peeks out. This AAA version is stricter: the focused item must be completely visible, with nothing overlapping it, not a sticky header, cookie banner, or chat bubble.

The usual offender is a fixed header that the page scrolls content up underneath.

Who this is for

  • Keyboard-only users, who lose their place when focus slides under a header.
  • Low-vision keyboard users, who need the whole focused control in view.

How to check and fix it yourself

Put your mouse away and press Tab down the whole page. Watch each focused item. If any gets partly tucked under a sticky header or floating widget, add scroll-padding equal to the header height so the browser scrolls it fully clear.

/* reserve space so focused items never sit under a 72px sticky header */
html {
  scroll-padding-top: 72px;
}

Where we can help

We keyboard-tab your key pages and watch for anything sticky covering the focused control, then give you the exact scroll-padding fix. It is one of the new WCAG 2.2 checks that sticky headers commonly trip.

How to meet it

Techniques the W3C accepts as sufficient (summarized). Follow a link for the full method.

Frequently asked questions

What does focus not obscured (enhanced) require?+

Success Criterion 2.4.12 (Level AAA, new in WCAG 2.2) says when an element receives keyboard focus, no part of it may be hidden by other content you added, like a sticky header, cookie bar, or chat widget.

How is it different from 2.4.11?+

2.4.11 Focus Not Obscured (Minimum) (Level AA) only requires that the focused item not be entirely hidden, a sliver showing is enough to pass. 2.4.12 (AAA) is stricter: the focused item must be fully visible, nothing covering any part of it.

What usually causes a failure?+

Sticky headers and floating widgets. As you tab down a page, the browser scrolls the focused field up under a fixed header. If any part ends up behind that header, you fail the enhanced rule.

Reference

This is a plain-language explainer. The authoritative source is the W3C Web Content Accessibility Guidelines (WCAG) 2.2.

WCAG 2.2 © W3C. Excerpts are paraphrased; see the linked documents for the normative text.

Not sure if your store passes 2.4.12?

A human auditor checks this and every other criterion against your live store, and documents the result.

Book an audit