The purpose of this success criterion is to make sure that functionality is predictable as users navigate through a website’s content. Any element that can trigger an event when it receives focus should not change the context.
Official Requirements
Success Criterion 3.2.1 On Focus (Level A): When any user interface component receives focus, it does not initiate a change of context.
Why is it required?
All users require predictability when they navigate through any website. If components do not act as they expect/guess, they may become confused.
To be precise, once a component receives focus from a user, whether with a mouse or keyboard, the component should not automatically change (also known as ‘changing on focus’). This will confuse the users.
This is especially problematic for users with low or no vision and people with motor impairments who are prevented from using a mouse for navigation.
How do we fix it?
1. Avoid modifications that are visual and behavioral in nature
2. Make sure no element changes just by receiving focus
3. Ensure that links do not open automatically on focus
4. Make sure forms don’t get submitted without the user taking an action on it (like clicking the ‘Submit’ button)
5. Make sure there are no automatic pop-ups
6. Ensure that focus never changes to another element automatically
7. Ensure that no other action that occurs on focus alone triggers the page to change.
Exceptions
Elements can change on focus if the context does not change.
Examples of such cases are –
a. You can use a dynamic menu on your website, the type where options for navigation drop down when you hover over an item. This is not a change of context.
b. Hover status on any given link is also not a change of context.
