Operable / 2.4 Navigable

2.4.11Focus Not Obscured (Minimum)

Level AANew in 2.2

Ensure a keyboard-focused element is not entirely hidden behind sticky headers, dialogs, or other overlapping content.

New success criterion added in WCAG 2.2

This criterion was introduced in WCAG 2.2 and was not part of WCAG 2.1. Refer to the links below for detailed guidance.

Why is "Focus Not Obscured" important?

A fixed navigation bar at the top of the page, commonly seen on websites, stays visible at the top of the screen even when scrolling. While convenient, it can cause serious problems for keyboard users.

When you press Tab to move focus to a link or button, the browser automatically scrolls to make the target element visible. However, the browser doesn't automatically account for the "visually hidden area" behind the fixed header. As a result, the focused element canend up completely hidden behind the header.

When users can't tell where the focus is, those who can't use a mouse are unable to continue navigating. Preventing this is the purpose of Success Criterion 2.4.11.

Note

Success Criterion 2.4.11 (AA) requires that a focused element is not completely obscuredby fixed elements. As long as some part of the element is visible, the minimum requirement is met. AAA criterion 2.4.12 is stricter, requiring that the element is not obscured at all. Start by checking the AA requirement: "not completely hidden."

Failing Example (Focus Is Hidden)

The demo below has an opaque position: sticky header at the top of a scrollable area. Because scroll-margin-top is not set on content elements, when Tab moves focus to the first item, it is completely hidden behind the header.

Focus hidden behind sticky header (Fail)

Navigate to each section of the site. Press Tab to select items.

Tab into the demo and move focus. When the 'Overview' button receives focus, it is completely hidden behind the fixed header.

Passing Example (scroll-margin-top prevents hiding)

This uses the exact same structure, with onlyscroll-margin-top (equal to the fixed header height) added to the buttons. When a button receives focus, the browser automatically scrolls it to a position below the header. No JavaScript required.

scroll-margin-top keeps focus visible (Pass)

Navigate to each section of the site. Press Tab to select items.

Tab through the items the same way — the 'Overview' button is always visible below the fixed header (thanks to scroll-margin-top).

How to Fix (Code)

Good / Recommended

Simply set scroll-margin-top on focusable elements. By managing the value with a CSS variable, you only need to update one place if the header height changes.

/* 1. Manage the sticky header height with a CSS variable */
:root {
  --header-height: 56px; /* Match the actual height of the sticky header */
}

/* 2. Apply margin to all focusable elements
      Header height + a small buffer (8px) ensures they stay below the header */
.page-content a,
.page-content button,
.page-content input,
.page-content select,
.page-content textarea,
.page-content [tabindex] {
  scroll-margin-top: calc(var(--header-height) + 8px);
}

Tip

scroll-margin-top has broad browser support and works without JavaScript. If a fixed footer or cookie banner is pinned to the bottom of the page, set scroll-margin-bottom in the same way. Adding a small buffer beyond the header height (+8px or so) provides extra visual breathing room.

Bad / Avoid

Common causes of this issue:

An opaque sticky/fixed header is placed without any compensation on the content side
scroll-margin-top is not set — the browser considers the element "within the scroll area," but doesn't know it's visually hidden by the fixed element
Cookie banners, chat widgets, fixed footers, and otherdynamically added fixed elements cause the same problem
Keyboard users can't tell where they are and are unable to continue navigating

/* ❌ Opaque sticky header with no content-side compensation */
.site-header {
  position: sticky;
  top: 0;
  height: 56px;
  background: #ffffff; /* Opaque background covers content */
  z-index: 100;
}

/* No scroll-margin-top set on content elements                */
/* → A focused element via Tab is completely hidden behind the header */

Checklist

If the page has position: sticky or position: fixedheaders/footers, focusable elements havescroll-margin-top (or scroll-margin-bottom) set
Verified on a real device that pressing Tab to move focus never results in the focused element being completely obscured by a fixed element
Also verified for cookie banners, support chat widgets, toast notifications, and other fixed elements that appear dynamically
The scroll-margin-top value is linked to the header height, using CSS variables or similar so it adapts to design changes
Focus rings are not removed (outline: none is not used)

Normative References

Success Criterion 2.4.11 Focus Not Obscured (Minimum) — WCAG 2.2(opens in a new tab)The normative requirement text.
Understanding Focus Not Obscured (Minimum) — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.

Why is "Focus Not Obscured" important?

Failing Example (Focus Is Hidden)

Passing Example (scroll-margin-top prevents hiding)

How to Fix (Code)

Checklist

APG Patterns Related to This Criterion

Dialog (Modal)

Normative References