• Success Criterion 3.2.1
  • Conformance level A

Radio Button That Selects Itself Just From Receiving Focus

3.2.1 — On Focus

Scenario

Setting

A weather app's forecast screen

What’s wrong

A control is activated or selected merely by receiving keyboard focus — e.g., radio buttons that auto-select while the user tabs through them — changing values the user never chose.

Example 

<input type="radio" name="units" value="celsius" onfocus="this.checked=true; applyUnits('celsius')">
<input type="radio" name="units" value="fahrenheit" onfocus="this.checked=true; applyUnits('fahrenheit')">

Why it matters

Tabbing past the Celsius option to reach Fahrenheit silently selects Celsius first and reformats every temperature on the screen, even though the user never pressed anything.

How to test

Tab to a radio button or option and stop (don't press Enter or Space): if it becomes selected merely from receiving focus, it fails.

How to fix

Apply the selection on change, a deliberate activation, never on focus, which merely means the control was reached.

<input type="radio" name="units" value="celsius" onchange="applyUnits('celsius')">
<input type="radio" name="units" value="fahrenheit" onchange="applyUnits('fahrenheit')">

Outcome

A user tabs through the unit options and only changes temperatures when they actually pick one.

Who is affected

Keyboard users tabbing through the unit options end up with a setting they didn't choose, just from passing over it.

Learn more

Related scenarios