Loading...
Loading content...
Loading content...
Focusing on an element should not automatically trigger navigation or form submission.
Why it matters: Unexpected changes confuse users and disrupt their workflow.
When any user interface component receives focus, it does not initiate a change of context.
What This Means: This success criterion requires that simply focusing on an element (like tabbing to it with the keyboard) does not trigger unexpected actions like navigation, form submission, or other context changes. Users must explicitly activate elements (click, press Enter, etc.) for actions to occur.
Why It's Important: Unexpected context changes when focusing on elements can be disorienting and disruptive, especially for keyboard users and users with cognitive disabilities. When users tab through a page, they expect to be able to review all interactive elements before activating them. Auto-navigation or auto-submission on focus prevents users from having control over when actions occur.
Remove any onfocus handlers that cause navigation, form submission, or other context changes. Focus should only highlight elements visually. Actions should only occur when users explicitly activate elements (click, press Enter, etc.). Dropdown menus should open on click/activation, not on focus. Form fields should not submit forms when focused.
This criterion ensures that users with cognitive disabilities can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that keyboard users can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that screen reader users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Focusing on a link automatically navigates to a new page, disrupting keyboard navigation.
<a href="/page" onfocus="window.location = this.href">Link</a>Focusing on a link only highlights it; navigation requires activation (click or Enter).
<a href="/page">Link</a>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 3.2.1 On Focus are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If I warn users that focus will trigger navigation, it's okay.
Focus should never trigger navigation, even with warnings. Navigation must require explicit activation (click or Enter key).
Auto-submitting forms on focus is a time-saver.
Auto-submission on focus is a violation. Forms should only submit when users explicitly click a submit button or press Enter in a form field.
Links or buttons that navigate on focus instead of on click.
Remove onfocus handlers that cause navigation. Use onclick or let default browser behavior handle activation.
Form fields that submit forms when focused.
Remove onfocus handlers that submit forms. Forms should only submit when users click submit button or press Enter in a form field.
Dropdown menus that open on focus without user activation.
Dropdowns should open on click/activation, not on focus. Focus should only highlight the element.
Note: These are official W3C resources for 3.2.1. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 3.2.1 On Focus correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Understandable PrincipleGuideline
3.2 Predictable