Understanding WCAG SC 3.2.2 On Input
Version and Level: 2.0/2.1/2.2 (Level A)

WCAG SC 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 this behavior beforehand.

Changes in context include significant alterations such as changes in user agent, viewport, focus, and content that change the meaning of the web page. These changes can disorient users, especially if the focus shifts to a different element without the user's confirmation or if a major content of the page has changed.

An exception would be a change of content. A change of content is distinct from a change of context. For example, this could involve the display of new form controls upon selecting a specific radio button in a radio group.

This criterion ensures that users maintain control over their interactions and are not surprised by unexpected changes while inputting data.

Benefits:

  1. User Control: Ensures users have control over their interactions, preventing unexpected changes in context.
  2. Avoidance of Screen Reader Interruption: Users, especially those with disabilities, are not disoriented by sudden changes in context.

Main Objective:

To prevent automatic changes in context when users are inputting data, ensure that they are made aware only of changes they intentionally initiate. This criterion particularly applies to actions occurring prior to user confirmation. For example, if a user scrolls through options using the arrow keys in a select input and select an option, a page change should not occur automatically unless it was previously announced to the user or approved by the user through a confirmation button.

Consider a single-page application with inputs in a side navigation bar. If the user updates these inputs, the main content updates automatically. Without prior notification or an option to confirm the changes, this criterion would not be met.

Best Practices:

  • Avoid automatic cursor movement: If an input group exists, such as a phone number input with separate fields for the area code and phone number, ensure that entering digits into one field does not automatically move the cursor to the next field without the user's awareness.

  • Avoid automatic form submissions: Ensure that forms are not submitted without user awareness or activation. Provide buttons and instructions that comply with HTTP and HTML protocols.

  • Provide user instructions for context changes: If a change of context is necessary, provide clear instructions informing users of this behavior.

Examples & Explanation:

Example: Using a Submit Button to Prevent Automatic Context Changes

What Should Be Avoided

A form automatically submits when the user fills in the last form field.

HTML/CSS

              <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required onblur="this.form.submit()">
              </form>

Explanation:Automatically submitting the form when the user leaves the last field can cause confusion and disrupt the user experience, particularly for users relying on assistive technologies.

What Should Be Done

A form uses a submit button, allowing the user to control when the form is submitted.

HTML/CSS

              <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <button type="submit">Submit</button>
              </form>

Explanation:By using a submit button, the form submission is under the user’s control. Users are aware that pressing the submit button will submit the form, preventing unexpected context changes.

Next Up

Expand your knowledge with SC 3.2.3 - Consistent Navigation. Learn to make navigation consistent for all users.

Go to SC 3.2.3