Skip to main content
Understandable WCAG 3.2.2

3.2.2 On Input

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.

Level A Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 3.2.2 requires that changing a form control value — checking a checkbox, selecting a radio button, entering text, or choosing a dropdown option — does not automatically trigger a change of context (navigation, new window, form submission) unless the user was warned beforehand.

If a change of context is needed on input, the user must be informed before interacting with the control. A visible label or instruction adjacent to the component satisfies this requirement.

Why it matters

Screen reader and keyboard users often explore form controls before committing to a choice. If selecting a dropdown option immediately navigates away, the user may lose their place, unsaved data, or the ability to review other options.

Predictable behavior builds user confidence. Unexpected context changes are the number one complaint in usability studies with assistive technology users.

Related axe-core rules

There are no automated axe-core rules for this criterion. Manual testing is required to verify that input changes do not cause unexpected context changes.

How to test

  • Interact with every form control on the page — change select values, check boxes, enter text.
  • Verify that no navigation, form submission, or significant page change happens automatically.
  • If automatic changes do occur, check that clear instructions are provided before the control.

How to fix

Bad practice

<!-- Select that navigates on change -->
<label for="lang">Language:</label>
<select id="lang" onchange="window.location = this.value">
  <option value="/en">English</option>
  <option value="/tr">Turkish</option>
</select>

<!-- Checkbox that submits form -->
<input type="checkbox" onchange="this.form.submit()"
       id="agree" />
<label for="agree">I agree to the terms</label>

Good practice

<!-- Select with explicit submit button -->
<label for="lang">Language:</label>
<select id="lang">
  <option value="/en">English</option>
  <option value="/tr">Turkish</option>
</select>
<button type="submit">Change language</button>

<!-- Or with advance warning -->
<p><strong>Note:</strong> Selecting a language will
   redirect you to the chosen version.</p>
<label for="lang2">Language:</label>
<select id="lang2" onchange="window.location = this.value">
  <option value="/en">English</option>
  <option value="/tr">Turkish</option>
</select>

Common mistakes

  • Language or region selectors that navigate immediately on change without a submit button.
  • Auto-submitting forms when the last field is completed.
  • Filter controls that reload the page without warning when a checkbox is toggled.
  • Radio buttons that trigger immediate navigation or significant content replacement.

Resources