WCAG 3.2.1 On Focus

Success criterion 3.2.1 keeps keyboard navigation predictable. People who use a keyboard, a switch device or a screen reader move through a page by focusing one element after another. If focusing an element suddenly opens a new page or throws the cursor somewhere else, they lose their place. It is level A and part of EN 301 549 as clause 9.3.2.1.

What the criterion requires

When any user interface component receives focus, it must not initiate a change of context. WCAG defines changes of context as major changes that can disorient users if made without their awareness: changes of user agent, viewport, focus, or content that changes the meaning of the page. Examples are opening a new window, moving focus to another component and navigating to a new page.

A change of content is not always a change of context. Expanding a menu, showing a hint or highlighting a field on focus is allowed. There are no other exceptions.

Typical failures on an online shop

• a newsletter or help pop-up opens and grabs focus as soon as a keyboard user tabs into a form field;
• focusing a category in the menu navigates straight to the category page;
• focusing a product thumbnail opens a gallery window;
• a script blurs a field as soon as it gets focus, so the user cannot type into it;
• tabbing onto the language or currency selector reloads the page.

How to check it

Automated: our checker has no rule for this criterion. Whether focus triggers navigation, a pop-up or a focus jump depends on scripts and on what the user expects, so it needs a manual check.

By hand: put the mouse away and press Tab through the whole page: header, menu, filters, product cards, forms and footer. Use Shift+Tab to go back. At every stop, note whether anything happened besides the focus moving: a new page, a new window or tab, a dialog, or focus jumping elsewhere. Repeat in the checkout and account pages.

How to fix it

• Trigger navigation and dialogs on activation (click, Enter, Space), not on focus or focusin events.
• Show help as inline text or a tooltip that does not take focus.
• For mega menus, open sub-menus on focus if you like, but do not move to a new page until a link is activated.
• Remove scripts that call blur() on focused controls.

Related criteria

• 3.2.2 On Input — the same rule for changing a value.
• 2.4.3 Focus Order — focus moves in a meaningful order.
• WCAG 2.2 checklist — all A and AA criteria at a glance.

Frequently asked questions

What is a change of context in WCAG?

A major change that can disorient a user who did not expect it: opening a new window or page, moving focus to another component, or changing content so that the meaning of the page changes.

Is showing a tooltip or dropdown on focus allowed under 3.2.1?

Yes, if it is only a change of content. A menu that expands or a hint that appears is fine; focus moving away, a new page or a new window is not.

Can an automated tool check 3.2.1?

No. Whether something changes when an element receives focus depends on scripts and has to be tested by tabbing through the page by hand.