3.2.1 On Focus: When any component receives focus, it does not initiate a change of context. (Level A)
Requirements
When a user interface element receives keyboard focus (for example when users reach it by pressing the ‘Tab’ key, or when they click on it), that should not cause any big change to happen, such as:
- automatically loading a new page;
- submitting a form;
- moving the keyboard focus somewhere else;
- significantly changing the content of the page.
- Such changes only occur when initiated by the user (e.g. upon activation of a button or link).
Why is it important?
This stops unexpected things happening without screen reader and screen magnifier users being aware of it.
Summary
Just navigating to an interactive control with the keyboard shouldn’t trigger any action, and shouldn’t move the keyboard focus somewhere else.
Common mistakes
- A dropdown menus automatically triggers navigation as the user uses the ‘Tab’ or ‘Arrow’ keys to move between the options.
- A big change (like loading a new page) happens when a user is merely leaving a form control.
- Focusing an element automatically moves the keyboard focus to another element.
Design Guide
- Make sure you don’t design an interaction, where moving the keyboard focus to an element causes any of the following to happen:
- navigating to a new page, or reloading the page
- submitting a form
- moving the keyboard focus somewhere else
- significantly changing the content on a page
On Focus Example for Web
- focus or blur events do not cause dis-orientating events such as:
- navigating to a new page
- reloading the page
- submitting a form
- moving the focus somewhere else using the HTMLElement.focus() method
- significantly changing the content on a page