Understandable · Level A · 3.2.2
On Input
Changing a value — checking a box, picking a radio button, selecting from a dropdown — shouldn't trigger a context change (navigation, a new window, a form submitting) unless the user was warned in advance that it would. 3.2.1 bans context changes on focus alone; this criterion allows them on an actual value change, but only with that advance warning.
- Blind
- Low vision
- Cognitive
How to recognize it
Interact with form controls — radio buttons, checkboxes, selects — and watch for anything beyond the expected visual update. The common failure is a dropdown that navigates to a new page or a radio button that submits the form the instant a value is chosen, with nothing telling the user beforehand that selecting would do that — someone clicking through the options to compare them before deciding gets swept along on the very first click. A subtler failure: an auto-advancing phone number field that jumps focus to the next box the moment the current one is full, with no label or instruction warning that this will happen — jarring for anyone who didn't expect it, even though the identical behavior, clearly signposted in advance ('fields advance automatically as you type'), is completely fine under this criterion.
How to fix it
If selecting a value needs to trigger navigation or another context change, warn the user in advance — a visible instruction, or require a separate explicit confirmation step (a 'Go' button next to the dropdown) rather than firing on the value change itself. Content changes that don't move focus or navigate away don't need any warning at all: showing extra form fields when a relevant option gets selected, revealing a conditional section, is a change of content, not a change of context, and is fine by default.
Example
Avoid
<select onchange="window.location = this.value">
<!-- no indication that choosing an option navigates --><input type="radio" name="plan" onchange="document.forms[0].submit()">
<!-- form submits immediately on selection, no warning -->Prefer
<label for="page-select">Go to page (selecting navigates immediately)</label>
<select id="page-select" onchange="window.location = this.value"><input type="radio" name="plan" onchange="showPlanDetails()">
<button type="submit">Continue</button>