Understandable · 3.2 Predictable
Changing the setting of a user interface component, such as checking a box, entering text, or selecting an option, must not automatically cause a change of context unless the user was told about that behavior before using the component.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Focus the region list and press the Down arrow key, or pick another region with the mouse. Compare what happens in each version.
The tools follow the version you last used.
What happened
Why it passes
You can move through the regions with the arrow keys and nothing happens until you press Go, so you stay in control.
Why it fails
The page changes the moment the selection changes, so a keyboard user looking through the list with the arrow keys is sent to another page before reaching their region.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
const region = document.querySelector("#region"); region.addEventListener("change", () => { window.location.href = "/shop/" + region.value + "/";});Choosing an option loads a new page at once. A keyboard user moving through the list with the arrow keys can be sent away before reaching the option they want.
Passes
Live preview
<form action="/shop/" method="get"> <label for="region">Shop in</label> <select id="region" name="region"> <option value="us">United States</option> <option value="ca">Canada</option> <option value="mx">Mexico</option> </select> <button type="submit">Go</button></form>Changing the option does nothing on its own; the page changes only when the person presses Go. This is technique H84.
Fails
Live preview
const code = document.querySelector("#code"); code.addEventListener("input", () => { if (code.value.length === 6) code.form.submit();});Typing the sixth digit submits the form with no warning, so the page changes while the person is still checking what they typed. WCAG documents this as failure F36.
Passes
Live preview
<label for="code">Six-digit code</label><p id="code-note">The form is sent as soon as you type the sixth digit.</p><input id="code" name="code" inputmode="numeric" maxlength="6" autocomplete="one-time-code" aria-describedby="code-note">The automatic submission is described before the field, so people know what will happen. 3.2.2 allows a change of context when the user is told in advance.
Passes
Live preview
const gift = document.querySelector("#gift");const giftFields = document.querySelector("#gift-fields"); gift.addEventListener("change", () => { giftFields.hidden = !gift.checked;});Checking the box shows extra fields in the same form but does not move focus or leave the page. That is a change of content, not of context, so it is allowed.
Why it matters
Screen reader, keyboard, and low vision users, and people with cognitive disabilities, may not notice or expect a sudden page change while filling in a form. Explicit submit buttons or advance warning keep them in control.
W3C: Understanding 3.2.2Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures