Level AAWCAG 2.2

2.4.11 Focus Not Obscured (Minimum)

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

Last reviewed: September 9, 2026

Understanding 2.4.11

This criterion was added in WCAG 2.2 to address a common modern pattern: sticky headers, sticky footers, cookie consent banners, and chat widgets that can visually cover an element just as it receives keyboard focus, leaving a keyboard user with no idea what is currently focused. It ensures that at least some part of the focused component remains visible so the user can find their place, benefiting keyboard users generally and screen magnifier users especially.

How to Meet It

Audit any fixed or sticky-positioned elements (sticky headers/footers, cookie banners, live chat launchers) to confirm they never fully cover a focused element as the user tabs through the page. A common fix is applying `scroll-margin-top` (or `scroll-margin-bottom`) to focusable elements so the browser leaves room for the sticky element when scrolling a newly focused item into view.

Code Examples

INCORRECT

header {
  position: sticky;
  top: 0;
  height: 120px;
  z-index: 10;
}
/* No scroll offset defined - focused inputs beneath scroll fully underneath the sticky header */

CORRECT

header {
  position: sticky;
  top: 0;
  height: 120px;
  z-index: 10;
}
input, a, button {
  scroll-margin-top: 130px; /* keeps focused elements clear of the sticky header */
}

Frequently Asked Questions

Does a tooltip or dropdown that intentionally opens on top of other content violate this criterion?

Generally no, as long as it doesn't cover the component that currently has focus itself. This criterion is about the focused component being hidden, not about other author-created overlays existing elsewhere on the page. A dropdown covering unrelated content below it is unaffected; a dropdown covering the very input that triggered it and that still holds focus would be a problem.

What's the difference between this and 2.4.12 Focus Not Obscured (Enhanced)?

2.4.11 (AA) only requires that the focused component is not entirely hidden; partial overlap is allowed. 2.4.12 (AAA) is stricter and requires that no part of the focused component is hidden at all. Most sites target 2.4.11 for AA conformance; 2.4.12 is a higher bar reserved for AAA claims.

Related Success Criteria

2.4.1 Bypass Blocks 2.4.2 Page Titled 2.4.3 Focus Order 2.4.4 Link Purpose (In Context)

Quick Facts

Criterion2.4.11
LevelAA
IntroducedWCAG 2.2

Automate Compliance

AccessiSight automatically scans and identifies 2.4.11 issues in your codebase.

Try Scanner Free