Level A
Understandable
WCAG 2.0+
Success Criterion 3.2.2: On Input
Official W3C Definition
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
Why This Criterion Matters
When changing a form value (typing in a field, selecting an option, checking a checkbox) triggers unexpected navigation or form submission, users can become disoriented. This is especially problematic for screen reader users who may not realize a change happened.
Key Principle: Changing input values should not automatically submit forms, navigate to new pages, or cause other major context changes unless users are warned in advance.
Who Benefits
Screen Reader Users
May not perceive sudden context changes.
Cognitive Disabilities
Need predictable, consistent behavior.
Motor Disabilities
Accidental selections shouldn't trigger irreversible actions.
Keyboard Users
Arrow key navigation shouldn't trigger unexpected changes.
How to Meet This Criterion
Technique 1: Use Submit Buttons
Good Example - Explicit Submit Button
<!-- Good: Changing selection doesn't auto-submit -->
<form action="/filter" method="get">
<label for="category">Category:</label>
<select id="category" name="category">
<option value="all">All Categories</option>
<option value="books">Books</option>
<option value="electronics">Electronics</option>
</select>
<button type="submit">Apply Filter</button>
</form>Technique 2: Provide Advance Warning
Good Example - Warning Before Auto-Change
<!-- Good: If auto-change is necessary, warn users -->
<p><strong>Note:</strong> Selecting a language will automatically
reload the page in that language.</p>
<label for="language">Choose Language:</label>
<select id="language" onchange="changeLang(this.value)">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
Bad Examples
<!-- Bad: Selection auto-submits without warning -->
<select onchange="this.form.submit()">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<!-- Bad: Checkbox change navigates away -->
<input type="checkbox" onchange="window.location='/other-page'">
Enable feature
<!-- Bad: Radio button opens new window -->
<input type="radio" name="opt" onchange="window.open('/popup')">
View in popup
<!-- Bad: Text input auto-submits on each keystroke -->
<input type="text" onkeyup="this.form.submit()">Acceptable Input Behaviors
- Live filtering: Updating a results list as user types (not navigating away)
- Real-time validation: Showing error messages as user types
- Dependent dropdowns: Updating options in another dropdown
- Character counters: Showing remaining characters
Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Auto-submit on select change | Users can't review selection before submitting | Add explicit submit button |
| Navigation on input change | Unexpected page change | Use submit button or warn users |
| New window on checkbox | Context change on simple input | Require explicit activation |
| Auto-advancing form fields | Confusing for keyboard users | Let users control field navigation |
Testing Methods
Manual Testing Steps
- Test all form controls: Change values in selects, checkboxes, radios, text fields
- Watch for unexpected changes: Navigation, form submission, new windows
- Check for warnings: If auto-change happens, was user warned?
- Test with keyboard: Arrow through selects - does it trigger changes?
Related Criteria
3.2.1 On Focus
Focus shouldn't cause context changes
3.3.1 Error Identification
Identify and describe errors