• 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 

<div class="cookie-banner">
  <p>We use cookies.</p>
  <button>Accept</button>
</div>
<main>
  <button class="menu-item">Add Margherita Pizza, $12</button>
</main>
<!-- .cookie-banner is position:fixed, bottom:0, height:120px, and the menu stays fully tabbable behind it -->

Why it matters

Tabbing through the menu, a customer can land on a menu item fully hidden under the cookie banner with no way to see what's selected.

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

A non-dismissed overlay must not both stay visible and let Tab reach content it's covering.

<div class="cookie-banner" role="dialog" aria-modal="true">
  <p>We use cookies.</p>
  <button>Accept</button>
</div>

trapFocusWithin(document.querySelector('.cookie-banner'));

Outcome

A customer either dismisses the cookie banner immediately or never tabs behind it in the first place.

Who is affected

Keyboard users browsing the menu lose sight of focused items whenever the banner overlaps them.

Learn more

Related scenarios