Goal
Ensure keyboard focus is fully visible (enhanced).
Success Criterion · WCAG 2.4.12
Focus Not Obscured (Enhanced)
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.
Level AAAWCAG 2.2Operable2.4 · Navigable
Copy button ready
What to do
When an element receives focus, ensure it is not obscured at all by author-created content.
Why it matters
Partially hidden focus still causes confusion, especially for low vision users and users navigating quickly.
Success criterion
What WCAG 2.4.12 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
When a user interface component receives keyboard focus, the component is not hidden due to author-created content.
Intent
Why WCAG created this requirement
- AAA requires full visibility of the focused component.
- Avoid any overlap from sticky UI or overlays.
- This is a WCAG 2.2 addition (Level AAA).
Benefits
Who gains when you pass
- Keyboard users always have a clear visual reference to focus.
- Low vision users avoid “partially hidden” controls that are hard to identify.
- Users avoid mistakes from interacting with elements they can’t fully see.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Partially obscured controls can appear ambiguous or look like the wrong element.
Users may misclick/activate wrong controls when the focused control is covered.
Overview
This AAA criterion strengthens 2.4.11: the focused component must not be obscured at all by author-created content (sticky headers, overlays, etc.).
- Account for sticky UI using scroll padding/margins and layout spacing.
- Ensure fixed overlays never overlap interactive content while focus is within it, or provide layout shifts.
- Test across all breakpoints; header heights often change.
Reference: All summaries and highlights originate from Understanding WCAG 2.4.12 and the W3C quick reference.
Fast facts
- Conformance level
- Level AAA
- WCAG version introduced
- WCAG 2.2
- Principle
- Operable
- Guideline
- 2.4 · Navigable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
Sticky header
Pass
Focused heading/button is fully visible below the sticky header.
Fail
Focused element is partially covered by the sticky header.
Cookie banner
Pass
Cookie banner pushes content up so focus targets remain fully visible.
Fail
Cookie banner overlaps page and covers focused controls.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document the strategy for preventing focus overlap (layout offsets, overlay behavior).
- Capture evidence for representative focus targets near top/bottom of viewport.
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Implementation checklist
Capture progress and blockers
- Identify all sticky/fixed elements (headers, footers, banners, chat widgets).
- Adjust layout so focused components can scroll fully into view without being covered.
- Use `scroll-padding-top/bottom` and `scroll-margin-*` to prevent overlap.
- Ensure overlays either avoid covering content or shift layout while present.
- Retest focus visibility across pages and components.
Testing ideas
Prove conformance with evidence
- Tab through pages and verify focused component is never overlapped by sticky/fixed content.
- Test skip links, in-page links, and programmatic focus targets.
- Test with overlays visible and ensure focus targets remain fully visible.
- Test at different zoom levels and viewport sizes.
Related success criteria
More from Navigable (2.4)
WCAG 2.4.1Bypass BlocksLevel AWCAG 2.4.2Page TitledLevel AWCAG 2.4.3Focus OrderLevel AWCAG 2.4.4Link Purpose (In Context)Level AWCAG 2.4.5Multiple WaysLevel AAWCAG 2.4.6Headings and LabelsLevel AAWCAG 2.4.7Focus VisibleLevel AAWCAG 2.4.8LocationLevel AAAWCAG 2.4.9Link Purpose (Link Only)Level AAAWCAG 2.4.10Section HeadingsLevel AAAWCAG 2.4.11Focus Not Obscured (Minimum)Level AAWCAG 2.4.13Focus AppearanceLevel AAA