2.4.11 Focus Not Obscured (Minimum)

Sticky headers, fixed footers, chat widgets, and cookie banners sit on top of page content and can cover focused elements. If a user tabs to a link or button that is completely hidden behind one of these overlays, they cannot see where focus is and effectively lose control of the keyboard experience.

This new criterion in WCAG 2.2 requires that no focused component is fully obscured. At Level AA, partial obscuring is acceptable as long as some part of the focused element is visible.

Add scroll padding or margin to account for sticky headers when an element receives focus: scroll-padding-top: 80px (matching your header height) on the html element.

Ensure modal overlays and chat widgets do not cover the focused element.

Test by tabbing through a page with a sticky header and checking that each focused element is at least partially visible.

• Sticky navigation header that covers the focused element when tabbing through page content
• Cookie consent banner that obscures the first interactive element on the page
• Fixed chat widget that covers a focused button or form field

This criterion requires that the focused component is not completely hidden. If half of a focused button is visible beneath a sticky header, that passes at Level AA. The enhanced version (2.4.12, Level AAA) requires the component to be fully visible.