• Success Criterion 2.1.1
  • Conformance level A

Interactive Control Removed From the Keyboard Tab Order

2.1.1 — Keyboard

Scenario

Setting

A hotel booking site's room-selection page

What’s wrong

tabindex="-1" (code removing it from the Tab order) on interactive controls removing them from tab order with no alternative access.

Example 

document.querySelectorAll('.select-room-btn').forEach(btn => {
  btn.setAttribute('tabindex', '-1'); // meant to be temporary during a fade-in animation
});
// the code path that restores tabindex="0" after the animation never runs

Why it matters

A guest tabbing through room cards skips every "Select room" button entirely, so they cannot book a room without a mouse.

How to test

Inspect the control in DevTools: if tabindex="-1" has been applied, removing it from the Tab order with no other way to reach it, it fails.

How to fix

Reserve tabindex="-1" for elements that should never receive Tab; if used temporarily, guarantee the code path that removes it always runs.

document.querySelectorAll('.select-room-btn').forEach(btn => {
  btn.classList.add('fade-in');
  btn.addEventListener('animationend', () => btn.removeAttribute('tabindex'), { once: true });
});

Outcome

A guest tabs through the room cards and lands on each "Select room" button in order.

Who is affected

Keyboard-only users and screen reader users using Tab lose access to every room-selection control on the page.

Learn more

Related scenarios