WCAG 3.2.2: How to Fix Unexpected Changes On Input

Last updated: 2026-03-22

Level A Understandable WCAG 3.2.2

What This Criterion Requires

WCAG 3.2.2 requires that 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. Changing a setting includes checking a checkbox, entering text in a field, selecting a radio button, or changing the selection in a dropdown menu. A change of context includes navigation to a new page, form submission, significant content changes that reflow the page, or opening a new window. This criterion does not prevent dynamic content updates in response to input -- it specifically targets major changes of context. For example, updating search results as a user types in a search field is acceptable because it enhances the experience without changing the overall page context. However, automatically submitting a form when a checkbox is checked or navigating to a new page when a dropdown selection changes are violations unless the user was warned beforehand. The key principle is that users should feel in control and not be surprised by major changes when they interact with form controls.

Why It Matters

When changing a form control setting causes an unexpected change of context, users become disoriented and may lose their place, their work, or their understanding of where they are. Screen reader users are especially affected because they may not perceive the change happening -- for example, if checking a checkbox causes the page to reload with different content, a screen reader user might not realize the entire page has changed around them. Users with cognitive disabilities rely on predictable behavior to understand and navigate interfaces, and unexpected context changes break that predictability. Users with motor disabilities may accidentally change form control settings due to imprecise input, and if each accidental change triggers a major page change, the experience becomes extremely frustrating. Keyboard users navigating select elements with arrow keys may trigger navigation on each key press rather than being able to browse options freely. Providing clear warnings before context-changing controls or requiring an explicit action (like a submit button) preserves user control.

Common Failures and How to Fix Them

Checkbox that auto-submits the form

Checking or unchecking a checkbox automatically submits the form or reloads the page with filtered results without any warning. Users who accidentally check a box or who are still setting multiple filters are disrupted by the unexpected submission.

Inaccessible 
<form action="/products">
  <fieldset>
    <legend>Filter by category</legend>
    <label><input type="checkbox" name="cat" value="electronics" onchange="this.form.submit()"> Electronics</label>
    <label><input type="checkbox" name="cat" value="clothing" onchange="this.form.submit()"> Clothing</label>
    <label><input type="checkbox" name="cat" value="books" onchange="this.form.submit()"> Books</label>
  </fieldset>
</form>
Accessible 
<form action="/products">
  <fieldset>
    <legend>Filter by category</legend>
    <label><input type="checkbox" name="cat" value="electronics"> Electronics</label>
    <label><input type="checkbox" name="cat" value="clothing"> Clothing</label>
    <label><input type="checkbox" name="cat" value="books"> Books</label>
  </fieldset>
  <button type="submit">Apply filters</button>
</form>

Radio buttons that trigger navigation without warning

Selecting a radio button immediately navigates to a different page or section without any prior warning that this would happen. Users expect to be able to review their selection before any action occurs.

Inaccessible 
<fieldset>
  <legend>Choose your plan</legend>
  <label>
    <input type="radio" name="plan" value="basic" onchange="window.location.href='/plans/basic'">
    Basic
  </label>
  <label>
    <input type="radio" name="plan" value="pro" onchange="window.location.href='/plans/pro'">
    Professional
  </label>
</fieldset>
Accessible 
<fieldset>
  <legend>Choose your plan</legend>
  <label>
    <input type="radio" name="plan" value="basic">
    Basic
  </label>
  <label>
    <input type="radio" name="plan" value="pro">
    Professional
  </label>
</fieldset>
<button onclick="navigateToPlan()">View plan details</button>
<script>
  function navigateToPlan() {
    const selected = document.querySelector('input[name="plan"]:checked');
    if (selected) window.location.href = '/plans/' + selected.value;
  }
</script>

How to Test

  1. Interact with every form control on the page (checkboxes, radio buttons, text fields, dropdowns, toggles) and verify that no change of context occurs when the setting changes.
  2. Pay special attention to filter controls, language selectors, and sort dropdowns that commonly trigger automatic page reloads or navigation.
  3. If any control does trigger a change of context on input, verify that the user is clearly warned about this behavior before interacting with the control.
  4. Use a keyboard to interact with all form controls and confirm that changing settings with arrow keys or typing does not cause unexpected navigation or submission.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria