- Success Criterion 3.2.1
- Conformance level A
- W3C reference F55
Element That Loses Focus the Instant It’s Reached
3.2.1 — On Focus
Scenario
Setting
An online spreadsheet's toolbar
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
<button id="format-btn" onfocus="this.blur()">Format</button>Why it matters
The moment a keyboard user tabs to the Format button, the script immediately blurs it, so focus silently bounces away and the button can never be activated by keyboard.
How to test
Tab to an element and check if it loses focus immediately: unwanted focus-triggered changes can't even register if a blur() fires right away — check this first.
How to fix
Remove the onfocus blur entirely; if it was added to suppress a focus outline, style :focus-visible instead of removing focus.
<button id="format-btn">Format</button>Outcome
A keyboard user tabs to the Format button and activates it on the first try.
Who is affected
Keyboard-only users navigating the toolbar with Tab can never land on this control long enough to press it.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Tabbing Into a Field That Opens a Modal Automatically
- Tabbing to a Menu Item That Auto-Navigates to Its Page
- Selecting an Option That Submits the Form Automatically
- Keyboard Focus Triggering an Unexpected Scroll Jump
- Tabbing Into a Field That Opens a Chat Widget
- Autofocus Chain That Jumps Focus From One Field to Another