3.2.2 On Input

Level: A | Principle: Understandable | Since: WCAG 2.0 | Automation: Manual

What This Means

Changing the setting of a form control (selecting a radio button, checking a checkbox, typing in a text field, changing a dropdown) must not automatically cause a change of context — such as submitting the form, navigating to a new page, or opening a new window — unless the user has been warned beforehand.

Who This Affects

Screen reader users — unexpected navigation or submission after selecting an option can be disorienting since they cannot visually confirm what happened
Cognitive disability users — sudden page changes without warning cause confusion about what went wrong
Motor impairment users — accidental selection of a dropdown option could trigger an irreversible action
Everyone — auto-submitting forms on input change removes the ability to review before submitting

Common Pitfalls

1. Auto-submitting on dropdown change

<!-- Bad: navigates immediately when user selects an option -->
<select onchange="window.location.href = this.value">
  <option value="/en">English</option>
  <option value="/fr">French</option>
  <option value="/es">Spanish</option>
</select>

<!-- Good: requires explicit submit -->
<label for="lang">Language</label>
<select id="lang" name="lang">
  <option value="/en">English</option>
  <option value="/fr">French</option>
  <option value="/es">Spanish</option>
</select>
<button type="submit">Go</button>

2. Auto-navigating when a radio button is selected

<!-- Bad: changing radio triggers navigation -->
<fieldset>
  <legend>Sort by</legend>
  <label><input type="radio" name="sort" onchange="this.form.submit()"> Price</label>
  <label><input type="radio" name="sort" onchange="this.form.submit()"> Rating</label>
</fieldset>

<!-- Good: explicit submit button -->
<fieldset>
  <legend>Sort by</legend>
  <label><input type="radio" name="sort" value="price"> Price</label>
  <label><input type="radio" name="sort" value="rating"> Rating</label>
</fieldset>
<button type="submit">Apply</button>

3. Opening a new window on checkbox change

<!-- Bad: checking the box opens terms in a new window -->
<label>
  <input type="checkbox" onchange="window.open('/terms')">
  I agree to the terms
</label>

<!-- Good: link to terms is separate from the checkbox -->
<label>
  <input type="checkbox" name="agree">
  I agree to the <a href="/terms" target="_blank" rel="noopener">terms</a>
</label>

How to Fix

Add explicit submit buttons

<form action="/search" method="get">
  <label for="category">Category</label>
  <select id="category" name="category">
    <option value="books">Books</option>
    <option value="music">Music</option>
    <option value="movies">Movies</option>
  </select>
  <button type="submit">Search</button>
</form>

If auto-change is necessary, warn the user first

<p><strong>Note:</strong> Selecting a language below will reload the page in that language.</p>
<label for="lang">Language</label>
<select id="lang" onchange="window.location.href = this.value">
  <option value="/en">English</option>
  <option value="/fr">French</option>
</select>

How to Test

Interact with every form control on the page: change dropdown selections, select radio buttons, check/uncheck checkboxes, and type in text fields.
After each interaction, verify no unexpected action occurs (no page navigation, no form submission, no new windows opening).
Use Arrow keys to cycle through <select> options and confirm no action fires until an explicit submit button is pressed.
Check for any onchange event handlers on form controls that trigger navigation or submission.
Pass: Changing any form control value does not trigger navigation, form submission, or a new window without prior warning.
Fail: Any form control triggers a context change (navigation, submission, new window) on input without the user being warned in advance.

axe-core Rules

| Rule | What It Checks | |------|---------------| | select-name | Ensures select elements have accessible names (related — does not detect auto-submit behavior) |