• Success Criterion 2.4.11
  • Conformance level AA

Non-Modal Popover Fully Covering the Element Behind It

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Non-modal dialogs/popovers opened over content that remains focusable and fully obscured.

Example 

.size-guide-popover {
  position: absolute;
  top: 200px;
  left: 300px;
  width: 400px;
  height: 500px;
  background: #fff;
}
<!-- opens over the product grid without disabling focus on the tiles it covers -->

Why it matters

While the size guide is open, a shopper can Tab onto a product tile completely hidden underneath it and have no idea what they've focused.

How to test

Open a non-modal dialog/popover over page content, then Tab: if the background content remains focusable and gets fully hidden underneath, it fails.

How to fix

A non-modal popover still needs to keep whatever it visually covers out of the tab order, or reposition itself instead.

popover.addEventListener('toggle', () => {
  productGrid.querySelectorAll('.product-tile').forEach(t => t.tabIndex = popover.open ? -1 : 0);
});

Outcome

A shopper opens the size guide and every tile they can still tab to stays fully visible.

Who is affected

Keyboard users can't see which product they're about to select whenever it's obscured behind an open popover.

Learn more

Related scenarios