WCAG (Level A) SC 3.2.2 On Input (w3.org)
Issue description
WCAG 3.2.2, “On Input” aims to prevent unexpected changes of context that can occur when users enter data into form fields or other input controls on a web page. This is important because sudden, unexpected changes can be disorienting and disruptive, especially for people with cognitive disabilities or those who rely on assistive technologies.
Many websites have input fields that trigger unexpected actions or changes in context when users enter data. This can include:
- Navigation changes: Typing in a field automatically navigates the user to a different page or section.
- Content updates: Entering data in a field causes content to be loaded, updated, or replaced, potentially disorienting the user.
- Pop-up windows: Typing in a field triggers a pop-up window to appear, interrupting the user’s flow.
- Form submission: Entering data in a field automatically submits the form, potentially leading to unintended consequences.
Why on input matters
- Predictability: Users should be able to anticipate what will happen when they enter data into a form field. Unexpected changes can be jarring and make it difficult to understand the functionality of the page.
- Control: Users should have control over when actions are performed or when navigation occurs. Automatic changes on input can take away that control.
- Accessibility: Unexpected changes can be particularly disruptive for users of assistive technologies, as it can interfere with their ability to navigate and understand the content.
WCAG requirements
This guideline requires that when any user interface component receives input, it does not initiate a change of context, unless the user has been advised of the behavior before using the component. This means that entering data into a field should not:
- Navigate to a new page or section.
- Update or replace content.
- Open a pop-up window.
- Submit a form.
Exceptions
- User expectations: Changes of context are allowed if they are expected by the user based on the component’s purpose (e.g., typing in a search field is expected to update the search results).
- User control: Changes are allowed if the user has been advised of the behavior and has a mechanism to turn it off.
Essentially, this guideline ensures that entering data into input fields does not trigger unexpected actions or changes, providing a more predictable and user-friendly experience for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 3.2.1 On Focus
- WCAG (Level AA) SC 3.2.3 Consistent Navigation
- WCAG (Level AA) SC 3.2.4 Consistent Identification
- WCAG (Level AAA) SC 3.2.5 Change on Request
- WCAG 2.2 (A) SC 3.2.6 Consistent Help
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 3.2.2, “On Input” involves ensuring that interactive elements don’t trigger unexpected changes of context when users enter data into them. Here’s how:
Prevent automatic actions on input
- Navigation: Ensure that typing in a field doesn’t automatically navigate the user to a different page or section. Navigation should only occur when the user explicitly activates a link or button (e.g., by clicking it or pressing Enter).
- Content updates: Avoid automatically loading, updating, or replacing content when a user types in a field. Content changes should be triggered by user actions like clicking a button or submitting a form.
- Pop-up windows: Prevent pop-up windows from appearing when a user types in a field. Pop-ups should only be triggered by explicit user actions.
- Form submission: Ensure that forms are not automatically submitted when the user types in a field. Submission should only occur when the user explicitly clicks a submit button or presses Enter in a designated submit field.
Use user activation as the trigger
- Explicit actions: Trigger changes of context only when the user performs an explicit action, such as clicking a mouse, pressing Enter, or tapping a touchscreen.
- Avoid input-based triggers: Avoid using JavaScript event handlers like
oninputoronchangeto trigger actions that change the context. Instead, use event handlers likeonclickoronsubmitthat respond to user actions.
Provide user control (if necessary)
- Inform users: If a component has a behavior that might cause a change of context on input, inform the user about this behavior before they use the component.
- Offer a way to disable: Provide a mechanism for users to disable this behavior if they prefer. This could be a setting in the user preferences or a control within the interface.
Testing
- Keyboard and mouse testing: Test the website using both the keyboard and mouse to ensure that no unexpected changes occur when entering data into input fields.
- Assistive technology testing: Test with screen readers to verify that input actions do not trigger unexpected changes in context.
Examples
- Auto-complete: If you use auto-complete on a form field, ensure that it doesn’t automatically navigate the user to a different page or submit the form when a suggestion is selected. The user should explicitly choose to navigate or submit.
- Live search: If you have a live search that updates results as the user types, ensure that it doesn’t automatically navigate the user to a new page when they select a search result.
- Input validation: If you validate input as the user types, ensure that it doesn’t trigger unexpected actions, such as displaying a pop-up window or changing the content of the page.
By implementing these techniques, you can ensure that input actions do not trigger unexpected changes, providing a more predictable and accessible experience for all users.
