3.2.1 – On Focus (Level A)
High-Level Description
This success criterion ensures that no unexpected changes occur when an element receives focus. Putting focus on a field or component must not trigger actions such as submitting a form, navigating to a new page, or opening a new window.
Detailed Description
Applies to:
- Form fields, links, buttons.
- Custom widgets, menus, and modals.
- Interactive components with dynamic behaviours triggered on focus.
This allows:
- Keyboard and screen reader users to safely navigate through content.
- Users with cognitive disabilities to explore interfaces without triggering unexpected outcomes.
- All users to remain in control of their browsing experience.
Indicators of Non-Compliance:
- A field submits a form as soon as it receives focus.
- Focusing on a dropdown causes a new page to load automatically.
- A video or audio starts playing just by tabbing onto a control.
- Page scrolls or content moves unexpectedly on focus.
Real World Examples
| Scenario | Non-Compliant | Compliant |
|---|---|---|
| Form with auto-submit | Tabbing into a field causes the form to submit. | Form submits only on explicit user action, such as pressing the 'Enter' or Submit button. |
| Country selection dropdown | Selecting a country immediately reloads the page. | Country reloads only after user confirms by pressing a 'Submit' or 'Continue' button. |
| Auto-playing video on focus | Tabbing into video player triggers autoplay. | Video starts to play only when user presses the 'play' button. |
Disability Impact
| Disability Group | Without Compliance | With Compliance |
|---|---|---|
| Keyboard Only Users | May trigger unexpected navigation or form submissions. | Can safely navigate using 'Tab' key. |
| Screen Reader Users | Experience context switches or focus loss mid-navigation. | Screen reader flows consistently. |
| Cognitive Disabilities | Surprises or sudden changes can increase confusion or anxiety. | Predictable interactions build trust and usability. |
| Motor Impairments | Accidental triggers are harder to reverse. | Interaction requires intentional input, reducing errors. |
Supporting Documentation
- WCAG 2.2 Success Criterion 3.2.1 - On Focus
- G107 – Not activating change of context when a component receives focus
- ARIA Authoring Practices – Focus Management
Remediation Strategies
1 - Require Explicit Activation
Use 'onClick' or 'onKeyDown' to trigger changes instead:
element.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
openModal(); // Only triggers on user action
}
});
2 - Delay Form Submission Until Confirmation
< form >
< input type="text" name="email" / >
< button type="submit" >Submit< /button >
< /form >
3 - Separate Navigation from Focus
If dropdowns or selections are used for navigation, include a separate action button:
< select name="country" >
< option value="ie" >Ireland< /option >
< option value="uk" >UK< /option >
< /select >
< button type="submit" >Go< /button >
4 - Test with Keyboard Only
Use Tab/Shift+Tab and arrow keys to move through the page. Confirm that nothing changes until you deliberately activate something.