WCAG 3.2.1 — On Focus, explained with examples

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.

A code fix you can copy

Trigger on user action (change, click), never on focus alone.

select.addEventListener('focus', () => form.submit());

select.addEventListener('change', () => form.submit());