Skip to content
Level A Understandable

WCAG 3.2.1: On Focus

When a UI component receives focus, it must not initiate a change of context. Users should be able to Tab through a page without unexpected navigation, popup windows, or form submissions triggered by focus alone.

What is WCAG 3.2.1 On Focus?

WCAG 3.2.1 On Focus is a Level A web accessibility success criterion under the Understandable principle. When a UI component receives focus, it must not initiate a change of context. Users should be able to Tab through a page without unexpected navigation, popup windows, or form submissions triggered by focus alone. Common failures include select menus that navigate when an option receives focus (without explicit submit) and links that open new windows on focus instead of activation. Meeting this criterion is essential for accessible, inclusive web design.

How to Test

  1. Tab through all interactive elements and verify no unexpected changes occur
  2. Check that focusing a select menu does not trigger navigation
  3. Verify that focusing an input does not open a new window
  4. Test that custom components do not auto-submit or navigate on focus
  5. Check that autofocus does not cause unexpected context changes

Common Failures

Good Example

<!-- Navigation with explicit submit -->
<form>
  <label for="nav-select">Go to section:</label>
  <select id="nav-select">
    <option value="/about">About</option>
    <option value="/contact">Contact</option>
  </select>
  <button type="submit">Go</button>
</form>

The select menu does not navigate on change/focus. The user must explicitly click the 'Go' button to navigate.

Bad Example

<!-- Auto-navigating select -->
<select onchange="window.location.href = this.value">
  <option value="/about">About</option>
  <option value="/contact">Contact</option>
</select>

Keyboard users navigating through options with arrow keys will trigger navigation on each option, making it impossible to reach options beyond the first.

Test Your Site for 3.2.1 Compliance

Use our free accessibility tools to check your website against WCAG 3.2.1.

Open Testing Tool

Related Success Criteria

A
2.1.1 Keyboard Operable
A
3.1.1 Language of Page Understandable

Related Reading

WCAG 2.2 Changes Summary → How to Check Website Accessibility for Free → WCAG Color Contrast Requirements Explained →