3.2.2 On Input

Level A · added in WCAG 2.0

Changing the setting of a control, such as typing in a field, choosing an option or checking a box, must not automatically change the context. The exception is when you tell users about the behavior before they use the control.

Who it helps

Keyboard users often move through select options with the arrow keys, which fires a change on each option. Screen reader users and people with cognitive disabilities may not notice that a new page loaded or that focus moved.

How to meet it

Add a submit or Go button instead of acting on the change event of a select, radio button or checkbox.
If a control must act on change, say so in visible text before the control, such as "Choosing a language reloads the page".
Do not move focus to the next field automatically when one is full, as in split phone or code fields, unless you warn users first.
Know what is allowed: showing extra fields below a checkbox, or updating a total, is a change of content, not a change of context.

Examples

Fails:Choosing an option loads a new page right away

<label for="country">Country</label>
<select id="country" onchange="location.href = '/' + this.value">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Fails:Selecting a radio button submits the form with no warning

<form action="/plan" method="post">
  <input type="radio" id="m" name="plan" value="monthly" onchange="this.form.submit()">
  <label for="m">Monthly</label>
  <input type="radio" id="y" name="plan" value="yearly" onchange="this.form.submit()">
  <label for="y">Yearly</label>
</form>

Passes:The page changes only when the user presses Go

<form action="/region" method="get">
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>
  <button type="submit">Go</button>
</form>

Passes:Users are told before they use the control

<form action="/plan" method="post">
  <p id="plan-note">Choosing a plan saves it right away.</p>
  <input type="radio" id="m" name="plan" value="monthly"
         aria-describedby="plan-note" onchange="this.form.submit()">
  <label for="m">Monthly</label>
</form>

Can a scanner detect this?

axe-core has no rule for this criterion, because the failure happens only when a value changes at run time. A person must change each control with the keyboard and check that no new page, window, submit or focus jump happens unexpectedly.

No automated rule tests this criterion. Check it by hand.

Common mistakes

Using a select menu as a jump menu that navigates on change.
Submitting a filter form each time a checkbox is toggled, which reloads the page and loses focus.
Auto-advancing focus between one-digit code fields with no warning.
Putting the warning after the control, where users reach it too late.

Official W3C explanation of 3.2.2

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026