Skip to main content
Understandable WCAG 3.2.1

3.2.1 On Focus

When any user interface component receives focus, it does not initiate a change of context.

Level A Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What this rule means

WCAG 3.2.1 requires that simply moving focus to a component does not trigger a change of context. A "change of context" includes navigating to a new page, opening a new window, moving focus to another element, or significantly changing the content of the page.

Users should be able to tab through interactive elements without unexpected things happening. Focus should be a passive action — exploring the interface — not an active one that commits a choice.

Why it matters

Keyboard users and screen reader users navigate by tabbing between elements. If focusing on a link causes navigation, or focusing on a select box changes the page, the user loses control. This is disorienting and can cause data loss.

Users with motor impairments may accidentally focus elements and trigger unintended actions. Predictable behavior is essential for all users but especially critical for those using assistive technology.

Related axe-core rules

There are no automated axe-core rules for this criterion. It requires manual testing of interactive elements to verify that focus alone does not trigger context changes.

How to test

  • Tab through every interactive element on the page.
  • Verify that no navigation, popup, or significant content change occurs on focus alone.
  • Test select elements, links, and custom widgets — these are the most common offenders.
  • Check that auto-advancing forms do not move focus to the next field without user action.

How to fix

Bad practice

<!-- Select that navigates on focus/change -->
<select onfocus="window.location = this.value">
  <option value="/page1">Page 1</option>
  <option value="/page2">Page 2</option>
</select>

<!-- Auto-submitting form on focus -->
<input type="text" onfocus="this.form.submit()">

Good practice

<!-- Select with a Go button -->
<select id="page-select">
  <option value="/page1">Page 1</option>
  <option value="/page2">Page 2</option>
</select>
<button onclick="window.location = document.getElementById('page-select').value">
  Go
</button>

<!-- Form that waits for explicit submission -->
<form action="/search" method="get">
  <input type="text" name="q" />
  <button type="submit">Search</button>
</form>

Common mistakes

  • Navigation menus that follow links when a link receives focus rather than on click/Enter.
  • Select boxes that trigger navigation on change (related to 3.2.2 but often triggered on focus in older implementations).
  • Opening new windows or dialogs when an element receives focus.
  • Auto-advancing focus in multi-step forms without user action.

Resources