• Success Criterion 2.4.11
  • Conformance level AA

Off-Canvas Menu Covering Focused Content Without Disabling It

2.4.11 — Focus Not Obscured (Minimum)

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Off-canvas menus sliding over main content that keeps focus without inerting the background.

Example 

.functions-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  transform: translateX(0);
  z-index: 20;
}
<!-- grid cells behind it remain tabbable, no inert or aria-hidden applied -->

Why it matters

With the functions panel open, tabbing can land on a spreadsheet cell that's now completely hidden underneath it.

How to test

Open an off-canvas menu that slides over the main content, then Tab: if the background remains focusable underneath without being made inert, it fails.

How to fix

inert removes an entire covered region from focus and screen reader access in one attribute.

<div id="grid-area" inert>...</div>
<div class="functions-panel">...</div>

Outcome

A user opens the functions panel and can only tab within it, never onto a hidden grid cell.

Who is affected

Keyboard users working with the spreadsheet lose sight of exactly which cell has focus whenever the panel overlaps it.

Learn more

Related scenarios