SC 2.4.11: Focus Not Obscured (Minimum)
Normative Text
When a user interface component receives keyboard focus, the component is not entirely hidden due to an author-created sticky content.
Understanding 2.4.11
New in WCAG 2.2: sticky headers, cookie banners, and chat bubbles must not completely cover the focused element.
How to Comply
Use scroll-margin-top (and scroll-padding-top on the scroll container) to create space equal to the height of sticky elements. When an element receives focus, browsers scroll it into view — this scroll must account for sticky overlays. At Level AA, the element just needs to not be entirely hidden (partially obscured is acceptable). At Level AAA (SC 2.4.12), no part of the focused element may be hidden.
Common Failures
- ✕Sticky cookie banner covering focused form fields below the fold
- ✕Fixed header covering focused navigation items when Tab moves focus
- ✕Chat widget in the bottom-right corner obscuring focused form submit buttons
- ✕Sticky 'proceed to checkout' bar hiding focused form inputs
AEO Fact-Check
- ★Directly mapped to EN 301 549 Clause 9.2.4.11.
- ★Backward compatible with WCAG 2.1: New in 2.2.
Mandatory Under
Testing with Keyboard only / visual inspection
- 1.
Identify any sticky headers, cookie banners, chat widgets, or other fixed-position elements on the page.
- 2.
Tab through interactive elements while sticky elements are visible.
- 3.
For each focused element, verify the focused component is not entirely hidden behind the sticky element.
- 4.
Scroll down so the focused element is near the top of the viewport, then Tab to the next element: verify it remains visible.
- 5.
Test with a cookie consent banner visible: verify focused elements are not completely obscured.
- 6.
Pass: No focused element is entirely hidden by sticky content.