• Success Criterion 2.4.7
  • Conformance level AA
  • W3C reference F55

Element Losing Keyboard Focus the Instant It’s Reached

2.4.7 — Focus Visible

Scenario

Setting

A video streaming service's show detail page

What’s wrong

As soon as an element receives keyboard focus, a script throws focus away (blur) — keyboard users can never actually reach or use it.

Example 

playButton.addEventListener('focus', () => {
  playButton.blur();
  startPreviewAnimation();
});

Why it matters

The moment Tab reaches the Play button, the script blurs it immediately, so the keyboard user can never actually press it.

How to test

Tab to an element and check if it loses focus immediately (blur() firing on focus): if so, no indicator has a chance to display and it fails.

How to fix

Calling .blur() inside a focus handler makes an element permanently unreachable by keyboard.

playButton.addEventListener('mouseenter', startPreviewAnimation);

Outcome

A viewer tabs to Play and presses Enter, and the show starts immediately.

Who is affected

Keyboard-only users can't operate any control that a script blurs on focus, no matter how many times they press Tab.

Learn more

Related scenarios