- 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
A car-rental site's checkout flow is a good example: as soon as an element receives keyboard focus, a script throws focus away (blur) — keyboard users can never actually reach or use it.
Why it matters
Blind users, people with motor disabilities, and anyone operating the interface without a pointer. On a car-rental site's checkout flow specifically, they can't operate the feature without a mouse.
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
Never call blur() on focus — let elements keep focus until the user moves it.
Outcome
Fixed, a visitor to a car-rental site's checkout flow can complete the task using only the keyboard.
Who is affected
Blind users, people with motor disabilities, and anyone operating the interface without a pointer.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Feature That Only Responds to Mouse Events, Not the Keyboard
- Clickable Element Acting Like a Link With No Real Keyboard Role
- Clickable Div With No Keyboard Focus or Key Handling at All
- Focusable Element That Enter and Space Don’t Actually Activate
- Custom Dropdown That Can’t Be Operated by Keyboard Arrows
- Drag-and-Drop Feature With No Keyboard Alternative