Goal
Keep keyboard focus visible by ensuring it is not hidden by other UI.
Success Criterion · WCAG 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.
Level AAWCAG 2.2Operable2.4 · Navigable
Copy button ready
What to do
When an element receives keyboard focus, ensure it is not entirely hidden by sticky headers, overlays, or other content.
Why it matters
If focus is obscured, keyboard users can’t see where they are and may activate the wrong control.
Success criterion
What WCAG 2.4.11 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 entirely hidden due to author-created content.
Intent
Why WCAG created this requirement
- Sticky headers/footers can cover focused controls when scrolling to them.
- Focus must remain visible enough for users to orient and interact.
- This is a WCAG 2.2 addition (Level AA).
Benefits
Who gains when you pass
- Keyboard users can always see where focus is, reducing errors.
- Low vision users using magnification can keep focus in view.
- Users navigating long pages with sticky UI avoid “invisible focus” problems.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Focus can land under a sticky header and appear to “disappear.”
Users may press Enter/Space and trigger an unintended control.
Users may repeatedly tab trying to find focus, increasing frustration.
Overview
When focus moves (via Tab or programmatic focus), the focused component must not be completely obscured by sticky headers, footers, banners, or overlays created by the author. Partial obscuring is allowed at this level, but the focused component must still be at least partially visible.
- Use CSS `scroll-margin-top` for anchored/focused elements to account for sticky headers.
- Ensure overlays (cookie banners, chat widgets) don’t cover focused controls or provide dismissal.
- When scrolling focus into view, ensure the element ends up at least partially visible.
Reference: All summaries and highlights originate from Understanding WCAG 2.4.11 and the W3C quick reference.
Fast facts
- Conformance level
- Level AA
- 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
Tabbing to a section link scrolls it into view below the sticky header.
Fail
Focused button scrolls under sticky header and is completely hidden.
Chat widget overlay
Pass
Chat widget doesn’t cover focus targets or can be dismissed easily.
Fail
Focused element appears behind a fixed chat widget and cannot be seen.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Document focus scrolling offsets for sticky headers across layouts.
- Capture evidence of skip-link/focus targets appearing below headers, not behind them.
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
- Audit pages with sticky headers/footers for focus visibility issues.
- Add `scroll-margin-top` (and/or `scroll-padding-top` on scroll containers) to offset sticky UI.
- Ensure in-page navigation, skip links, and focus management scroll targets into view.
- Avoid placing fixed overlays that cover interactive elements without a close option.
- Test focus behavior across breakpoints where header sizes change.
Testing ideas
Prove conformance with evidence
- Keyboard-tab through pages with sticky headers and confirm focused elements are not fully hidden.
- Test skip links and in-page anchor navigation for proper scroll positioning.
- Open overlays (cookie banners, modals) and verify focus remains visible.
- Test on mobile and desktop where viewport height changes can affect visibility.
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.12Focus Not Obscured (Enhanced)Level AAAWCAG 2.4.13Focus AppearanceLevel AAA