• Success Criterion 2.1.1
  • Conformance level A
  • W3C reference F55

Element That Loses Focus the Instant It’s Reached by Keyboard

2.1.1 — Keyboard

Scenario

Setting

A car-rental site's checkout flow

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 

const carThumbs = document.querySelectorAll('.car-thumb');
carThumbs.forEach(thumb => {
  thumb.addEventListener('focus', () => {
    thumb.blur(); // added to suppress the default focus outline
  });
});

Why it matters

A renter tabbing toward the "Select this car" thumbnail gets bounced away before they can press Enter, so they can never choose a vehicle.

How to test

Tab to any element and check whether it loses focus immediately (blur() firing on focus): if so, you can never interact with it via keyboard.

How to fix

Style away a default outline with CSS if it clashes with the design, never call blur() to hide it.

const carThumbs = document.querySelectorAll('.car-thumb');
carThumbs.forEach(thumb => {
  thumb.classList.add('custom-focus-style');
});
/* .custom-focus-style:focus-visible { outline: 3px solid #1a5fb4; } */

Outcome

A renter tabs to a car thumbnail, sees a clear focus ring, and presses Enter to select it.

Who is affected

Keyboard-only users and switch users who tab sequentially can never stay on the control long enough to activate it.

Learn more

Related scenarios