Focus Not Obscured (Minimum)

What it requires

The load-bearing word is entirely. At Level AA a focused control may be partly covered and still pass; only being completely hidden by author content fails (Source: W3C, Understanding SC 2.4.11 ) . Two normative notes matter: where the user can reposition content, only its initial position is tested; and if the user can reveal the focused component without advancing focus (for example, by pressing Escape to dismiss an overlay), it is not considered hidden.

Who it helps

• Sighted keyboard users and people using switch devices, voice input, sip-and-puff, on-screen keyboards, or scanning software, who must be able to see the current point of focus to know how to proceed.
• People with low vision, especially under screen magnification, where the visible viewport is small and a focused control can easily slip under fixed content.
• People with attention, short-term memory, or executive-function limitations, who benefit from always being able to find focus.

When focus disappears under a sticky bar, users may not know how to continue, or may think the page has stopped responding.

How to meet it

The cleanest fix for the most common cause — sticky headers and footers — is CSS scroll-padding, the sufficient technique C43 (Source: W3C Technique C43 ) . It reserves space so the browser scrolls a focused control into the unobscured region:

:root {
  /* Match the height of your sticky header and footer */
  scroll-padding-top: 5rem;
  scroll-padding-bottom: 4rem;
}

Other patterns that satisfy the criterion:

• Make an overlay modal so it takes focus and must be dismissed before tabbing the page.
• Have non-essential notifications close when focus moves past them.
• For user-opened persistent content, displace or reflow the page rather than overlaying it, trap focus until dismissed, open into white space, or collapse on focus loss (or via Escape).

Edge cases

• Partial obscuring is permitted at AA. A focus ring half-covered by a banner still passes 2.4.11 (but check the visible part against 1.4.11 Non-text Contrast).
• Non-persistent disclosures — menus, select and combobox dropdowns, date pickers, tooltips — do not fail, because they are not expected to persist.
• Properly built modal dialogs always pass, because they take focus on appearance.
• Common failure: F110, a sticky footer or header completely hiding focused elements (Source: W3C Failure F110 ) .

How to test it

1. Tab through every focusable element at the relevant breakpoint and zoom level.
2. With sticky headers and footers, cookie banners, and any non-modal overlays present, watch each element as it receives focus.
3. If an element becomes entirely covered by author content when focused, it fails — unless the user can reveal it without moving focus (for example, Escape, or a key that scrolls it into view).

The focus trio (2.4.11–2.4.13)

WCAG 2.2 added three focus criteria. Only the first is required at AA:

• 2.4.11 Focus Not Obscured (Minimum), AA — this page. Focused element not entirely hidden.
• 2.4.12 Focus Not Obscured (Enhanced), AAA — no part of the focused element may be hidden.
• 2.4.13 Focus Appearance, AAA — the focus indicator itself must be large enough (a 2 CSS pixel reference thickness) and have at least a 3:1 contrast change. This is about how the indicator looks, not what covers it.

Common questions