WCAG 3.2.2: On Input

Who this helps

The through-line with 3.2.1 On Focus is a single principle: the interface changes context only when the user asks it to. 3.2.1 protects looking; 3.2.2 protects adjusting; buttons remain the place where things actually happen.

Settings, activations, and the exception

Auditing 3.2.2 means sorting interactions into three buckets:

• →Setting changes (covered): selecting an option, checking a box, choosing a radio button, typing in a field, moving a slider. These must not auto-cause a change of context — new page, submitted form, new window, moved focus, or a content change that alters the page’s meaning.
• →Activations (not covered): clicking a button or link, pressing Enter to submit. These are explicit requests — navigating or submitting in response is exactly what the user asked for.
• →Warned behaviors (the exception): a context change on input is permitted if the user is advised before using the component — a visible instruction ahead of the control in reading order (and programmatically associated, e.g. via aria-describedby), such as “Selecting a country reloads this form.”

Content updates that keep the user in place — filtering results, revealing a dependent field, updating a total — are usually fine. The safest layout puts the updated content after the control in reading order, so screen reader users encounter changes downstream of where they are, never behind them. Even better, prefer the AAA pattern of 3.2.5 Change on Request: put every context change behind an explicit button and the question never arises.

Pass and fail examples

Code examples

The jump-menu fix: add a real submit action

<!-- ✗ Fails: changing the selection navigates immediately -->
<select onchange="location.href = this.value">
  <option value="/docs">Documentation</option>
  <option value="/pricing">Pricing</option>
  <option value="/support">Support</option>
</select>

<!-- ✓ Passes: the user commits the choice with a button -->
<form action="/go" method="get">
  <label for="dest">Go to section</label>
  <select id="dest" name="dest">
    <option value="/docs">Documentation</option>
    <option value="/pricing">Pricing</option>
    <option value="/support">Support</option>
  </select>
  <button type="submit">Go</button>
</form>

Content updates are fine; context changes are not (React)

An onChange handler may update state that re-renders content after the control. It must not navigate, submit, or move focus.

// ✗ Fails: selecting a plan navigates automatically
function PlanPicker() {
  const router = useRouter()
  return (
    <select onChange={(e) => router.push("/checkout?plan=" + e.target.value)}>
      …
    </select>
  )
}

// ✓ Passes: selection updates a summary; a button performs the navigation
function PlanPicker() {
  const router = useRouter()
  const [plan, setPlan] = useState("starter")
  return (
    <>
      <label htmlFor="plan">Plan</label>
      <select id="plan" value={plan} onChange={(e) => setPlan(e.target.value)}>
        <option value="starter">Starter — $9/mo</option>
        <option value="team">Team — $29/mo</option>
      </select>
      <PlanSummary plan={plan} /> {/* content update below the control */}
      <button type="button" onClick={() => router.push("/checkout?plan=" + plan)}>
        Continue to checkout
      </button>
    </>
  )
}

Using the exception: advise before the component

If a context change on input is genuinely necessary, the warning must come first — visible, and programmatically associated.

<!-- ✓ Conforms via the exception: user is advised before using the control -->
<p id="country-note">
  Selecting a country reloads this page to show local pricing and tax.
</p>
<label for="country">Country</label>
<select id="country" aria-describedby="country-note"
        onchange="reloadWithCountry(this.value)">
  <option>United States</option>
  <option>Germany</option>
  <option>Japan</option>
</select>

<!-- Better still: avoid needing the exception with an Apply button -->

Common failures

• ✗Jump menus: select elements that navigate onchange with no Go button and no advance warning.
• ✗Forms that auto-submit when the last field is filled, a radio button is chosen, or a checkbox is ticked.
• ✗Country, language, or currency selectors that reload the page the instant a value changes, with no notice before the control.
• ✗Auto-advancing multi-box inputs (verification codes, card numbers, dates) with no instructions telling users focus will move.
• ✗Typing in a search field triggering full navigation to a results page after n characters, rather than updating a results region in place.
• ✗Opening a new window or modal as a side effect of checking a box or picking an option.
• ✗Putting the 'warning' after the control, in a tooltip, or only in text users reach once the jump has already fired — advice must come before use.

How to test for 3.2.2

1. 1

   Change every setting without confirming anything

   Work through each select, checkbox, radio group, slider, and text field. Change the value and stop. The page must not navigate, submit, open windows, or move focus. Anything beyond an in-place content update is a finding.

2. 2

   Drive selects with the keyboard

   Focus each select and press the arrow keys. In several browsers this changes the value option by option — the exact scenario that detonates onchange navigation. If browsing options triggers a jump, it fails.

3. 3

   Type one character in each text field

   Watch for auto-submission after a character count, focus leaping to the next field, or navigation from live search. Any of these without prior notice is a failure.

4. 4

   Check claimed warnings

   Where a context change on input is intended, verify the advisory text is visible before the control in reading order and associated with it (aria-describedby). A warning discovered after the jump does not count.

5. 5

   Grep for the risky handlers

   Search the codebase for onchange/onChange and oninput/onInput containing location.href, router.push, form.submit(), window.open, or .focus(). Each match either needs a button-based redesign or a compliant advance warning.

Run this together with 3.2.1 On Focus in a single keyboard pass — first Tab everywhere (3.2.1), then operate everything (3.2.2). The full WCAG 2.2 checklist covers the rest of the Predictable guideline.

Frequently asked questions