WCAG 2.2 Demo SuiteOn Input
Changing the setting of a component does not automatically cause a change of context unless the user has been advised of the behaviour beforehand.
Who this affects
Screen reader users who arrow through a select to hear the options — if each option navigates immediately, they cannot reach the one they want. Users with cognitive disabilities disoriented by unannounced jumps.
The failure and the fix
Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.
Fails 3.2.2
Open the failing example in a new tab
fail.html — the problem
<h1>Your account</h1>
<form>
<!-- FAILURE 1: the classic "jump menu". Changing the selection navigates
immediately. With a keyboard, arrowing down through a select changes the
selection on every key press - so the user is thrown to "Orders" while
trying to reach "Addresses", and can never get past the first option. -->
<div class="field">
<label for="section">Go to section</label>
<select id="section" onchange="navigate(this.value)">
<option value="">Choose…</option>
<option value="orders">Orders</option>
<option value="addresses">Addresses</option>
<option value="payment">Payment methods</option>
</select>
</div>
<!-- FAILURE 2: ticking a checkbox submits the whole form and reloads the
page, with no warning that it would. -->
<p class="field">
<input type="checkbox" id="gift" onchange="submitNow()">
<label for="gift">This is a gift</label>
</p>
<!-- FAILURE 3: filling the last character of a field auto-advances focus to
the next one. Users who type slowly, use speech input, or need to review
what they typed lose their place - and correcting a typo becomes a
fight with the interface. -->
<div class="field">
<label for="pc1">Postcode (first part)</label>
<input type="text" id="pc1" maxlength="4" oninput="if(this.value.length===4) document.getElementById('pc2').focus()">
</div>
<div class="field">
<label for="pc2">Postcode (second part)</label>
<input type="text" id="pc2" maxlength="3">
</div>
</form>
<p id="log" role="status"></p>Meets 3.2.2
Open the passing example in a new tab
pass.html — the fix
<h1>Your account</h1>
<form>
<!-- FIX 1: the selection changes nothing on its own. An explicit Go button
performs the navigation, so the user can browse the options freely and
commit when they are ready. -->
<div class="field">
<label for="section">Go to section</label>
<select id="section">
<option value="">Choose…</option>
<option value="orders">Orders</option>
<option value="addresses">Addresses</option>
<option value="payment">Payment methods</option>
</select>
<button type="button" class="button" onclick="navigate()">Go</button>
</div>
<!-- FIX 2: the checkbox only changes state. Nothing is submitted until the
user submits. -->
<p class="field">
<input type="checkbox" id="gift">
<label for="gift">This is a gift</label>
</p>
<!-- FIX 3: one field, no auto-advance. If the design really requires split
fields, the user must still control focus themselves.
3.2.2 also permits a change of context on input IF the user is warned
BEFORE using the control - so a note like "choosing a country reloads
the page" placed before the select would make that pattern conform.
Not warning afterwards: warning first. -->
<div class="field">
<label for="pc">Postcode</label>
<p class="hint" id="pc-hint">For example, SW1A 1AA.</p>
<input type="text" id="pc" autocomplete="postal-code" aria-describedby="pc-hint">
</div>
<button type="submit" class="button">Save changes</button>
</form>
<p id="log" role="status"></p>How to test it
Change every select, checkbox, and radio without pressing a submit button. If the page navigates or reloads, either add an explicit Go button or warn the user in advance.
-
Automated
Requires interacting with each control and observing the result.
No axe rule maps to this criterion. It has to be checked by a person.
-
Keyboard
Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.
-
Screen reader
Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.
-
Visual
Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.
Related criteria
In the specification
- Understanding 3.2.2 On Input — the W3C explanation, intent and exceptions
- 3.2.2 in the WCAG 2.2 Recommendation — the normative wording