• Success Criterion 2.1.1
  • Conformance level A

Keyboard Focus Landing on Hidden or Inert Page Regions

2.1.1 — Keyboard

Scenario

Setting

A fitness app's workout tracker

What’s wrong

Focus sent into aria-hidden (code hiding content from screen readers)/inert regions making controls announced-invisible or skipped while equivalents don't exist.

Example 

finishSetBtn.addEventListener('click', () => {
  document.getElementById('celebration-banner').focus();
});
<div id="celebration-banner" aria-hidden="true" tabindex="-1">Great set!</div>

Why it matters

A screen reader user who finishes a set has focus silently sent into a hidden region, so nothing is announced and they lose their place on the page.

How to test

Tab through the page: if focus lands inside an aria-hidden or inert region (invisible but still focusable), or skips past a control an equivalent doesn't exist for, it fails.

How to fix

Never move focus to anything carrying aria-hidden="true"; use role="status" instead of hiding a message that needs to be announced.

<div id="celebration-banner" role="status" tabindex="-1">Great set! On to the next one.</div>
<!-- remove aria-hidden so the focused, announced element matches what's rendered -->

Outcome

A screen reader user hears "Great set, on to the next one" the moment focus lands there.

Who is affected

Screen reader users experience a dead, unannounced focus jump with no equivalent visible or spoken confirmation.

Learn more

Related scenarios