Level AUnderstandable
3.2.1

On Focus

Simply moving to an element must not trigger a surprise, like a popup, a jump, or a page change.

In plain English

When a keyboard user Tabs onto something, that is like hovering, not clicking. It should be safe. This rule says the mere act of focusing an element must not set off a surprise: no popup opening, no jumping to a new page, no focus flying off somewhere else.

Changes like that are fine when someone deliberately activates a control (clicks it or presses Enter). They are not fine just because focus arrived.

Who this is for

  • Keyboard users, who move focus constantly and cannot predict surprises.
  • Screen-reader users, who get disoriented when the page changes under them without an action.
  • People with cognitive differences, for whom unexpected changes are especially disruptive.

What “good” looks like

Wait for a real action before changing context.

Tab onto a "country" dropdown → nothing happens yet.        ✓
Choose a country and press Enter (or click Apply) → updates. ✓

Tab onto the dropdown → page instantly reloads.              ✗

Where stores get it wrong

Auto-submitting select menus that navigate on focus, fields that trigger modals when tabbed into, and widgets that steal focus on load. These predictability problems appear on the common failures list.

How to meet it

Techniques the W3C accepts as sufficient (summarized). Follow a link for the full method.

Frequently asked questions

What does on focus require?+

Success Criterion 3.2.1 (Level A) says that moving keyboard focus to a component must not cause a change of context, such as opening a new window, submitting a form, or moving focus somewhere else automatically.

What counts as a change of context?+

Opening a new window or tab, navigating to a new page, significantly rearranging the page, or moving focus to another element. These are fine as a result of a deliberate action, but not just because focus landed on something.

What's a common example of getting this wrong?+

A dropdown that navigates to a new page the moment it receives focus (before you choose an option), or a field that opens a modal simply because you tabbed into it. Both surprise keyboard users, who often can't predict or undo them.

Reference

This is a plain-language explainer. The authoritative source is the W3C Web Content Accessibility Guidelines (WCAG) 2.2.

WCAG 2.2 © W3C. Excerpts are paraphrased; see the linked documents for the normative text.

Not sure if your store passes 3.2.1?

A human auditor checks this and every other criterion against your live store, and documents the result.

Book an audit