WCAG 2.1 · Level A · Understandable
WCAG 3.2.1 — On Focus, explained with examples
When any component receives focus, it must not initiate a change of context. Sudden navigation, opened modals, or auto-submitted forms on focus disorient keyboard users.
- Number
- 3.2.1
- Level
- A
- Principle
- Understandable
- Guideline
- 3.2 Predictable
Why this criterion exists
Sudden navigation, opened modals, or auto-submitted forms on focus disorient keyboard users.
If you only remember one thing: when any component receives focus, it must not initiate a change of context. Everything else on this page is detail.
Who feels it when this fails
Accessibility criteria sometimes feel abstract until you see who pays the cost when a site ignores them. On Focus affects:
Keyboard users
Screen reader users
How sites typically fail it
These are the patterns we see week after week. None are intentional — they are accidents of how teams build interfaces under deadline. Knowing the failure modes is the fastest path to writing them out of your component library.
Dropdown that auto-submits on selection
Modal that opens when a form field receives focus
How to test for it
Tab through every interactive element; nothing should navigate or open without an explicit click/key.
Automated scanners catch this criterion most of the time, but never all of the time. Manual testing with the keyboard and a screen reader closes the gap.
A code fix you can copy
Trigger on user action (change, click), never on focus alone.
The problem
select.addEventListener('focus', () => form.submit());The fix
select.addEventListener('change', () => form.submit());Trigger on user action (change, click), never on focus alone.
Other Understandable criteria
Find every accessibility issue on your site in 60 seconds.
Free public scan. No card. AI-generated fixes for every issue we find.