Focus Not Obscured (Minimum)
This criterion is new in WCAG 2.2. When a component receives keyboard focus, author-created content must not hide it entirely. Two words there do most of the work. The rule measures the component, not the focus ring around it, so a button whose outline is covered but whose face is visible passes here, and a fully hidden ring is 2.4.7's problem instead. And entirely means entirely. Partial covering passes at this level, deliberately, in recognition of how responsive layouts actually behave. The version that allows no covering at all is 2.4.12 at Level AAA. A properly built modal dialog always passes, because it takes focus when it appears, so the thing with focus is the dialog rather than whatever it landed on top of. One more limit saves work on any interface with movable parts. Where a user can drag a panel or a toolbar around, only its starting position is assessed, so a panel somebody parked over the control they then tabbed to is not your failure.
Why it matters
The modern page floats a small fleet of fixed things over its own content, and keyboard focus sails underneath them without anybody planning for it. A user presses Tab, focus lands somewhere they cannot see, and the interface has switched itself off from where they are sitting. It costs some people more than others. Somebody using magnification sees a fraction of the page, so a bar covering a strip of the viewport covers a far larger share of what they can actually see. And people with attention or short-term memory limitations lose their place completely when the thing they were on disappears, because nothing is left on screen to hold on to.
Who this rule protects
This affects sighted keyboard users who lose track of focus behind a sticky bar, low-vision users who orient with a pointer and see less of the page at a time under magnification, and people with attention limitations, short-term memory limitations or executive processing difficulties, who lose their place entirely when focus goes out of sight.
How to check it yourself
- Tab down through a page with a sticky footer and confirm the focused element never disappears completely behind it.
- Shift+Tab back up the same page and watch the sticky header. A header failure typically shows on the way back and not on the way down, which is why these survive most testing.
- Check the cookie banner specifically, and remember partial covering passes. The finding is a component that cannot be seen at all.
- Open every dropdown, date picker and tooltip, then move focus away. If one stays open on top of whatever now has focus, it has stopped being the kind of disclosure this rule ignores.
- For anything the user opened themselves, ask whether they can reveal the focused component without moving focus on. Escape closing it counts, scrolling it out of the way counts, and a key that switches between overlays counts.
Failures we see most often
- A sticky footer that completely covers each newly focused control as the user tabs down the page.
- A sticky header that completely covers each control as the user tabs back up, on a page where tabbing down looked fine.
- A consent banner that entirely hides the field the user just tabbed into, is not modal, and stays put when focus moves past it.
- A dropdown that stays open after focus leaves it, sitting on top of whatever has focus now.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Low visionpeople who can see the screen but not easily
- Motor and keyboard-onlypeople who cannot use a mouse, or cannot use one precisely
- Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it
How to fix it
- Set scroll-padding-top and scroll-padding-bottom to the height of your fixed bars, so the browser scrolls focused elements clear of them. It is the one documented technique here, and it only fixes scrolling. It does nothing about an overlay that appears over something already focused.
- For a cookie banner there are three answers and any one works. Make it modal so it has to be dismissed first, use scroll padding so it never overlaps the focused control, or close it when it loses focus.
- For anything a user opens that then stays open, pick one of five shapes. Push the existing content down, the way an accordion does. Reflow the page around it, the way a sidebar narrows the main column. Take focus and hold it until dismissed, which works and should be used carefully because it treats keyboard and pointer users differently. Open into empty space, which is what a chat panel sliding up the unpopulated side of a page is doing. Or collapse it the moment focus leaves.
- Give every overlay an Escape key that closes it. That alone brings user-opened content inside the exception, because the user can reveal what has focus without moving focus on.
- Watch the dimming layer as well as the solid one. A blur or a scrim over the focused control can pass this rule and still fail 1.4.11, because the indicator has to meet its contrast bar with the overlay's effect applied.
Step-by-step fix guides (2)
Passes vs. fails
Passes
The page scrolls the field clear of the banner before focus lands there, and Escape closes the banner outright.
Fails
Tab moves focus to the 'Card number' field, which sits completely under the cookie banner with no part of it visible.
In audits and lawsuits
This is a WCAG 2.2 addition, so a site audited against 2.1 has never been checked against it, and no automated rule exists for it or for either of its siblings. We test with the overlays your pages ship in production, including consent banners, chat widgets and promotional bars. The most useful correction to most people's method is direction. Tab down the page and the sticky footer is what catches focus. Shift+Tab back up and the sticky header is what catches it, so a test that only runs forward misses a whole class of them. There is also one condition that turns a passing overlay into a failing one. A dropdown, a date picker or a tooltip is fine because it is not expected to persist, and the moment one of them stays open after focus has moved away, it becomes exactly the content this rule is about.