
3.2.2: On Input
Guideline 3.2.2 ensures that changes in context do not occur automatically when a user inputs data into a form field or other interactive element. This means that filling out a form, selecting a dropdown menu, or changing a setting should not automatically trigger navigation or significant content changes without user confirmation.
Importance of 3.2.2: On Input Success Criterion
Preventing automatic changes in context upon user input is crucial for accessibility and usability. It allows users to have full control over their interactions with the webpage, especially those who use screen readers or rely on keyboard navigation. This guideline helps to avoid confusion and ensures a predictable experience for all users, including those with cognitive disabilities who may need more time to process information and make decisions.
Primary Use Cases and Requirements Under Guideline 3.2.2: On Input (Level A)
Use Case 1: Form Fields
Example: A form where entering data into a text field does not automatically submit the form.
Implementation: Ensure that form submissions are triggered by a user action, such as clicking a submit button, rather than automatically upon data entry.
How to Test: Enter data into various form fields and verify that the form is not submitted until the user explicitly clicks the submit button.
Use Case 2: Dropdown Menus
Example: A dropdown menu where selecting an option does not automatically navigate to a new page.
Implementation: Use JavaScript to ensure that changes in dropdown selections do not trigger navigation without user confirmation.
How to Test: Select different options from the dropdown menu and verify that navigation does not occur until a separate action, such as clicking a "Go" button.
Use Case 3: Checkbox and Radio Button Selections
Example: A survey form where selecting a radio button or checkbox does not automatically submit the form.
Implementation: Ensure that form submission requires an explicit user action, such as clicking a submit button.
How to Test: Select various checkboxes and radio buttons and verify that the form is not submitted until the user clicks the submit button.
Use Case 4: Search Fields
Example: A search input field where typing does not automatically refresh the search results.
Implementation: Use JavaScript to trigger the search action only when the user explicitly submits the search query.
How to Test: Type search queries into the input field and verify that the search results do not refresh until the user submits the search query.
Testing Steps:
1. Manual Testing: Interact with form fields, dropdown menus, checkboxes, and radio buttons using various inputs. Ensure that no automatic changes in context occur upon input without explicit user actions.
2. Screen Reader Testing: Use a screen reader to navigate through interactive elements. Confirm that changes in context do not occur automatically and that user actions are required for significant changes.
3. Automated Tools: Use automated accessibility testing tools to check for input-related issues. Review the tool's report and manually verify any flagged elements to ensure compliance.
How to Implement 3.2.2: On Input
Handling Form Submissions
Ensure form submissions require explicit user actions.
<form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit"> </form>
Managing Dropdown Menu Changes
Use JavaScript to handle dropdown menu changes without triggering automatic navigation.
<label for="category">Category:</label> <select id="category"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <button onclick="navigate()">Go</button> <script> function navigate() { var selectedValue = document.getElementById('category').value; window.location.href = 'page' + selectedValue + '.html'; } </script>
Preventing Automatic Form Submissions on Input
Ensure checkboxes and radio buttons do not trigger form submission automatically.
<form action="submit_form.php" method="post"> <label for="option1">Option 1</label> <input type="checkbox" id="option1" name="option1"> <label for="option2">Option 2</label> <input type="radio" id="option2" name="options"> <input type="submit" value="Submit"> </form>
Managing Search Field Input
Use JavaScript to handle search queries without automatically refreshing the search results.
<label for="search">Search:</label> <input type="text" id="search" name="search"> <button onclick="performSearch()">Search</button> <script> function performSearch() { var query = document.getElementById('search').value; // Implement search functionality here } </script>
Testing and Iteration
Regularly test your website's input behavior to ensure compliance with WCAG 3.2.2. Use a combination of keyboard navigation, screen readers, and automated tools.