3.2.1: On Focus
Guideline 3.2.1 ensures that when any user interface component receives focus, it does not initiate a change of context. This means that actions such as navigating to a new page, opening a new window, or submitting a form should not occur just by focusing on an element, ensuring a predictable and user-friendly experience.
Importance of 3.2.1: On Focus Success Criterion
Ensuring that focus does not cause a change of context is crucial for accessibility. This guideline helps users with disabilities by preventing unexpected changes that can disorient them. Users with visual impairments, cognitive disabilities, and those relying on screen readers or keyboard navigation can navigate more confidently without fear of triggering unintended actions. It enhances usability and consistency, providing a more predictable interaction for all users.
Primary Use Cases and Requirements Under Guideline 3.2.1: On Focus (Level A)
Use Case 1: Form Fields
Example: A contact form where focusing on an input field does not submit the form.
Implementation: Ensure that focusing on the input fields does not cause any action beyond highlighting the field.
How to Test: Navigate through the form using the Tab key. Verify that no form submission or page reload occurs when fields gain focus.
Use Case 2: Dropdown Menus
Example: A navigation bar with dropdown menus that expand on click rather than focus.
Implementation: Use JavaScript to handle click events instead of focus events for expanding menus.
How to Test: Use the Tab key to navigate to the dropdown menu. Ensure the menu does not expand until a click event occurs.
Use Case 3: Links
Example: A list of links where focusing on a link does not navigate away from the current page.
Implementation: Ensure that the links do not change the page until the Enter key is pressed.
How to Test: Use the Tab key to navigate through the links. Verify that no navigation occurs until a link is activated with Enter or a click.
Use Case 4: Interactive Widgets
Example: A carousel widget where focusing on navigation buttons does not automatically slide the content.
Implementation: Ensure that carousel navigation requires explicit user action, such as clicking a button, to change slides.
How to Test: Use the Tab key to navigate to the carousel navigation buttons. Verify that the carousel does not change slides on focus alone.
Testing Steps:
1. Manual Testing: Navigate through interactive elements using the Tab key. Ensure no changes in context occur upon focusing on each element.
2. Screen Reader Testing: Use a screen reader to navigate through the webpage. Confirm that focusing on elements does not trigger unintended actions.
3. Automated Tools: Use automated accessibility testing tools to check for focus-related issues. Review the tool's report and manually verify any flagged elements to ensure compliance.
How to Implement 3.2.1: On Focus
Avoid JavaScript on Focus
Ensure JavaScript does not initiate changes on focus events.
// Avoid this
element.onfocus = function() {
window.location.href = "newpage.html";
};
// Use this instead
element.onclick = function() {
window.location.href = "newpage.html";
};
Using CSS for Visual Focus Indication
Use CSS to style focus states without changing context.
input:focus, button:focus {
outline: 2px solid #005fcc; /* Add a visible focus indicator */
}
Handling Focus in Forms
Ensure form fields do not submit forms on focus.
<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>
Testing Focus Behavior
Regularly test your website's focus behavior to ensure compliance with WCAG 3.2.1. Use a combination of keyboard navigation, screen readers, and automated tools.