WCAG 3.2.2 On Input

Success Criterion 3.2.2 requires that changing the setting of a user interface component doesn't automatically cause a change of context, unless the user has been advised of the behavior beforehand. It's a Level A criterion under Guideline 3.2 (Predictable) — the input-driven counterpart to 3.2.1 On Focus.

The core problem

Typing into a field, checking a box, or selecting an option are all normal interactions a user reasonably expects to stay contained within the current context — until they explicitly submit, click a button, or otherwise take a deliberate next step. If simply selecting a dropdown option instantly navigates to a new page, or checking a checkbox instantly submits a form, users (especially those relying on assistive technology, who may not immediately perceive that a big context shift just happened) lose predictability over what their own actions will do.

The classic example: auto-navigating dropdowns

<!-- A common but risky pattern -->
<select onchange="window.location = this.value">
  <option value="/products">Products</option>
  <option value="/about">About</option>
</select>

A sighted mouse user might tolerate this pattern reasonably well since the visual page change is immediately obvious. A screen reader user arrowing through options to explore what's available may trigger an unexpected navigation before they've even settled on their intended choice — each arrow-key press could unintentionally jump to a different page.

When this pattern IS allowed

The criterion doesn't ban auto-triggering context changes on input outright — it requires that the user be advised of the behavior before using the component. A dropdown explicitly labeled "Select a page to jump to immediately" gives the user fair warning of what selecting an option will do, satisfying the criterion even though the underlying auto-navigation behavior is unchanged.

The safer, more common fix

Pair the select with an explicit "Go" button, so selecting an option only stages the choice, and an explicit user action commits it:

<select id="page-picker">...</select>
<button type="button" onclick="navigate()">Go</button>

This avoids needing to rely on the "advised beforehand" exception at all, and matches what most users already expect from a form control by default.