3.2.2 On Input

WCAG 2.2 · 3.2.2 A Understandable

What it requires

Changing the setting of any user-interface component must not automatically cause a change of context unless the user has been advised of that behaviour before using the component. A “setting change” means entering text, selecting a radio button or checkbox, choosing an option in a select menu, or moving a slider — anything that alters a control’s value. A “change of context” is a significant shift the user did not request: navigating to a new page, submitting a form, opening a new window, or substantially re-arranging the page so the original focus point is gone.

In short: simply interacting with a control must not trigger something unexpected. If a select menu navigates to a new page the moment an option is picked, or a form auto-submits when the last field is filled, the criterion fails. Putting focus on a control is also covered — focusing a field must not, on its own, cause a change of context. The fix is usually to wait for an explicit action, such as pressing a button, or to warn the user in advance.

  • Screen-reader users who move through controls sequentially and can be disoriented when the page navigates or submits the instant a value changes.
  • Keyboard-only users, for whom arrowing through a select’s options can fire a navigation on each option before they reach the one they want.
  • Users with cognitive or attention disabilities who lose their place and context when the page changes without a clear, deliberate trigger.
  • Low-vision and magnifier users who may not notice an unexpected new window or layout shift outside their viewport.

How to detect it

Ways to check On Input
Check What to look for
Manual review Find every select, radio, checkbox, and text field. Note any that navigate, submit, reload, or open a window when changed, with no prior warning.
Keyboard Tab to each select and arrow through its options. If the page changes on each option rather than on a separate “Go” action, it fails.
Screen reader Listen for unexpected page-load or focus announcements triggered by simply changing a value or focusing a field.
Zoom / magnify Watch for new windows or major layout shifts that occur outside the visible region when a control’s value changes.
Automated tools Largely not reliably caught by axe or similar — behaviour depends on runtime JavaScript intent, so manual testing is required.

How to fix it

  1. Remove handlers that act on a control’s value change alone — drop onchange navigation and auto-submit.
  2. Require an explicit, separate action: a clearly labelled Go or Submit button the user activates when ready.
  3. If a change of context truly must happen on input, advise the user before they reach the control (e.g. visible instructions next to it).
  4. Ensure focusing a control never causes navigation, submission, or a new window.

Replace an auto-navigating menu with a menu plus a submit button:

<form action="/go" method="get">
  <label for="country">Country</label>
  <select id="country" name="country">
    <option value="">Choose…</option>
    <option value="ie">Ireland</option>
    <option value="il">Israel</option>
  </select>
  <button type="submit">Go</button>
</form>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 3.2.2 On Input: a change of context on input is a behaviour, not a static attribute, so it cannot be machine-verified. Treat this as a manual review using the console check and steps below.

Run this in the browser console

on-input-suspects.js 
// READ-ONLY: lists controls that may auto-trigger a context change on input.
const suspects = [...document.querySelectorAll('select, input, [onchange], [oninput]')]
  .filter(el => el.onchange || el.oninput ||
    el.hasAttribute('onchange') || el.hasAttribute('oninput'));
console.table(suspects.map(el => ({
  tag: el.tagName.toLowerCase(),
  type: el.type || '',
  name: el.name || el.id || '',
  handler: el.getAttribute('onchange') || el.getAttribute('oninput') || '(JS-bound)'
})));
suspects.forEach(el => { el.style.outline = '2px solid magenta'; });

What to check manually: for each highlighted control, change its value (without submitting) and confirm it does not auto-submit the form, navigate, or move focus unexpectedly. Verify any such behaviour is described to the user in advance.