Skip to main content
사용 중인 브라우저가 오래되어 이 사이트가 제대로 표시되지 않습니다. Chrome, Edge, Firefox 또는 Safari 최신 버전으로 업데이트해 주세요.
Back to WCAG Database
Level AAAWCAG 2.2

2.4.12 Focus Not Obscured (Enhanced)

When a user interface component receives keyboard focus, no part of the component is hidden due to author-created content.

Last reviewed: September 9, 2026

Understanding 2.4.12

This is the AAA-level enhancement of 2.4.11. Rather than merely requiring that a focused element isn't entirely hidden, it requires complete visibility with zero overlap from sticky headers, cookie banners, or other author-created overlays, giving keyboard users and low vision users using zoom or magnification full, unobstructed confirmation of exactly what is focused at all times.

How to Meet It

Ensure fixed or sticky-positioned content (sticky headers/footers, persistent banners, chat widgets) never overlaps any part of a focused element, not just the majority of it. This typically requires larger `scroll-margin`/`scroll-padding` offsets than the AA version, sized to fully clear the sticky element plus a small buffer, and may require dismissible banners to actually be dismissed or repositioned rather than merely shrinking the focused element's visible portion.

Code Examples

INCORRECT
footer a, footer button {
  scroll-margin-bottom: 20px; /* Insufficient - the fixed banner still covers part of the control */
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  height: 80px;
  z-index: 999;
}
CORRECT
.cookie-banner {
  position: fixed;
  bottom: 0;
  height: 80px;
  z-index: 999;
}
footer a, footer button {
  scroll-margin-bottom: 90px; /* fully clears the banner height plus a buffer, not just partially */
}

Frequently Asked Questions

Is it realistic to conform to this AAA criterion on a site with a persistent cookie banner or chat widget?

It requires more careful layout work than the AA version, since even a 1px overlap technically fails, but it's achievable with sufficiently generous scroll-margin/scroll-padding values, or by having the overlay automatically dismiss or shrink when keyboard focus moves near it. Because it's AAA, WCAG itself does not expect it to be achievable for all content types on all sites.

Do I need to satisfy both 2.4.11 and 2.4.12?

Only if you're targeting AAA conformance. Satisfying 2.4.12 (no part hidden) automatically satisfies 2.4.11 (not entirely hidden) as well, since the enhanced version is a strict superset of the minimum requirement. For AA conformance, 2.4.11 alone is sufficient.

Related Success Criteria

Quick Facts

  • Criterion2.4.12
  • LevelAAA
  • IntroducedWCAG 2.2

Automate Compliance

AccessiSight automatically scans and identifies 2.4.12 issues in your codebase.

Try Scanner Free