Understandable Guideline 3.2 Predictable

3.2.1 On Focus

Simply moving to a control must not change anything

Level A Needs a person to check

What it asks for, in plain English

Landing on a link, button or field, whether by tabbing to it, clicking into it or a screen reader moving to it, must not set off a change of context by itself. Nothing should submit a form, open a new window, move focus somewhere else or load a different page just because an element received focus. The person has not done anything yet.

Changes the person asks for are fine: pressing Enter on a link, typing in a field, choosing an option. Showing a tooltip or a hint on focus is also fine, because it does not take the person anywhere.

The typical failures are a search box that opens a full-screen overlay as soon as it is focused, a menu item that loads a new page when you tab onto it, and a custom field that submits the moment it gains focus.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 3.2.1 page has the full intent, techniques and definitions.

Who it affects

A keyboard user tabbing through a page lands on a control and is thrown onto a different page before they can read what it was.

A screen reader user exploring a form moves to each field to hear its label and keeps being sent to the next step before they have typed anything.

Someone with a hand tremor touches a field by accident and triggers a submission they did not mean.

How to check it

  1. Put the mouse away and press Tab through the whole page, including menus, search boxes and forms.
  2. Watch for anything that happens without you pressing Enter or Space: a dropdown loading a new page, a dialog appearing, focus jumping, a form submitting.
  3. Click into each text field and leave it again without typing. Nothing should navigate or submit.
  4. Repeat on any custom widget (date picker, combobox, carousel), which is where this bug usually hides.

What Websight checks for 3.2.1

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this. A scanner can see that a focus handler exists but not what it does. Websight lists it in its manual checklist.

Practical tips

  • Use focus handlers for styling and hints only; put navigation and submission behind click, Enter and change events.
  • If a widget must open on focus (a combobox listing its options), keep focus inside the field and let Escape close it.
  • Test every third-party widget you embed; they fail this more often than hand-written code.

Scan your page and see where 3.2.1 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.