Success Criterion 2.4.11
Conformance level AA

Cookie Banner Covering a Focused Element Behind It

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

A food delivery app's restaurant menu

What’s wrong

Cookie/consent banners overlaying page while background stays tabbable — focused items fully hidden beneath.

Example

.sticky-header { position: sticky; top: 0; } /* covers focused fields below it */

Why it matters

Sighted keyboard users when sticky chrome would otherwise hide the focused control.

How to test

Tab to a control while a cookie/consent banner is open: if the banner fully covers the focused element while the background stays tabbable, it fails.

How to fix

The focused element must remain at least partially visible — never fully hidden behind sticky bars, banners, or overlays. .input-field { scroll-margin-top: 80px; } /* clears the sticky header on focus */ A focused element must not be entirely hidden behind sticky headers, footers, or other fixed content.

Outcome

On a food delivery app's restaurant menu, this barrier is gone for sighted keyboard users when sticky chrome would otherwise hide the focused control — they reach the same outcome without extra effort.

Who is affected