WCAG SC 3.2.1 requires that when any component receives focus, it does not initiate or trigger a change of context. This criterion ensures that users do not experience unwanted actions, such as opening a modal or navigating to a new page, merely by focusing on an element. This is particularly important for users who rely on keyboard navigation or assistive technologies.
To ensure that no changes in context are triggered when an element receives focus. 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.
For instance, if a user navigates through a navigation menu using the tab key and focuses on an element that immediately opens a dropdown menu, this does not constitute a change of context as long as the user is not required to tab through the entire dropdown menu. The navigation should continue as originally intended, unless the user deliberately shifts focus to the dropdown menu.
Failures of this success criterion specifically involve unexpected changes to the current page context or the user's focus. Examples include instant form submission when focusing on the 'submit' button without user activation, or elements that open dialogs upon focus where the focus immediately moves to the dialog without the user intending to activate it.
Prevent Automatic Actions: Ensure that events which change the context of the page or move the focus from the current element occur only upon user activation, not on focus.
Stable Focus: The focus should not shift to another element without the user opting for it. This can cause confusion for users who utilize assistive technologies.
Test Your Website: Use the Tab and Shift-Tab keys to navigate through the entire page, ensuring that none of the failures mentioned above occur.
Avoid Automatic Form Submission: Ensure that forms are submitted only upon user activation, not by focusing on submit buttons.
Example: French Phrases in an English Context
A page opens a new window when the user focuses on a button using the tab key.
<button onfocus="window.open('newpage.html')">Click Me</button>
Explanation:This behavior disorients users, particularly those using assistive technologies, by unexpectedly changing the context.
page opens a new window only when the user explicitly activates the button by clicking or using the 'Spacebar' key.
<button onclick="window.open('newpage.html')">Click Me</button>
Explanation:By triggering the action only on a click, spacebar activation, users remain in control of their navigation. This approach ensures that no context changes occur without explicit user action, providing a predictable navigation experience.