Skip to main content

WCAG 3.2.2 On Input (Level A)

This page demonstrates how to handle user input changes without unexpected context changes.

Poor Implementation Example

Automatic Form Submission

Why this fails:
  • Form submits automatically when option is selected
  • No warning about context change
  • User loses control of the interaction
  • Unexpected page reload

Automatic Language Switch

  • Page language changes immediately
  • No confirmation dialog
  • Content changes without warning

Good Implementation Example

Settings with Preview

Note: Changes will be previewed below. Click "Apply Changes" to update the settings.
Changing language will require confirmation and page reload

Preview

This is how your content will look with the selected settings. Changes are shown here before being applied to the entire page.

Why this works:
  • Changes are previewed before applying
  • Clear warning about context changes
  • Explicit action required to apply changes
  • Preview updates without page reload

Search with Auto-Complete

Suggestions will appear below as you type
  • Results update without page reload
  • Clear indication of auto-update behavior
  • Results are keyboard accessible
  • ARIA live region for screen readers

Form with Multiple Steps

Note: This form has multiple steps. You will be asked to confirm before moving to the next step.

Step 1: Personal Information

Best Practices Summary

  • Warn users about context changes before they occur
  • Provide previews of changes when possible
  • Require explicit user action for significant changes
  • Use appropriate ARIA attributes for dynamic content
  • Maintain keyboard focus appropriately
  • Provide clear feedback about auto-updating features