2.4.11 Focus Not Obscured (Minimum)

What does it mean?

Sticky headers, sticky footers, cookie banners, chat buttons and other fixed layers can cover the element that currently has focus. When a keyboard user tabs to a link and it slides underneath a sticky header, they can no longer see where they are.

At this level, the focused element must not be entirely hidden by author-created content; being partly covered is still allowed (the stricter AAA criterion 2.4.12 forbids that too). Content that the user opened, such as an expanded menu, does not cause a failure if the user can close it without moving focus, for example with Escape.

Who does it help?

• Sighted keyboard users who need to see the focused element
• People using screen magnification, where fixed layers take up a large part of the view
• People with cognitive disabilities who lose track when focus disappears

Common failures

• A sticky header that covers links and form fields when the page scrolls to them by Tab
• A cookie banner fixed to the bottom of the screen that hides the buttons in the footer
• A fixed chat or feedback button that sits over the last link on the page
• A non-modal dialog that stays open over content and does not close with Escape

How we test it

• evidence Evidence: our scanner collects material such as screenshots, lists and measurements.

Test question: Is a focused element ever completely hidden (e.g. by a sticky header or cookie banner)? Flagged cases listed.

A person decides every criterion. No criterion ever passes automatically.

How to fix it

.site-header { position: sticky; top: 0; height: 5rem; }
/* focused elements scroll under the header */

.site-header { position: sticky; top: 0; height: 5rem; }

html {
  scroll-padding-top: 6rem;    /* header height plus space */
  scroll-padding-bottom: 5rem; /* room for a fixed bottom bar */
}

scroll-padding makes the browser keep focused elements clear of the sticky header and bottom bar when it scrolls them into view.

Practical tips

• Tab through long pages with all banners open, at different window sizes and at 200% zoom.
• Make cookie banners and similar layers closable and non-covering once a choice has been made.

Guides and patterns on this

• Contrast that everyone can readPale grey text may look refined, but many people struggle to read it, and on a phone in bright sunlight everybody does. Here are the ratios WCAG 2.2 sets and how to lock them into your design.
• Getting there without a mouseMany people use the web without a mouse: with a keyboard, switches, voice control or a screen reader. Here is what has to work for them and how to manage focus properly in modern web apps.
• Cookie banners that lock no one outThe cookie banner is often the first thing visitors meet, and for some the last: if it cannot be used with a keyboard or screen reader, the site is closed to them. Here is how to get it right.
• Modal dialogFocus moves in on open, Escape closes, focus returns.

Official source

Understanding WCAG 2.2 at the W3C: 2.4.11 Focus Not Obscured (Minimum)