WCAG 3.2.1: How to Fix Unexpected Changes on Focus

Last updated: 2026-03-22

Level A Understandable WCAG 3.2.1

What This Criterion Requires

WCAG 3.2.1 requires that when any user interface component receives focus, it does not initiate a change of context. A change of context is a major change in the content of the web page that, if made without user awareness, can disorient users who cannot see the whole page at once. Changes of context include opening a new window or tab, submitting a form, moving focus to a different component, or significantly changing the page content in a way that would disorient the user. Receiving focus means navigating to a component using the keyboard (Tab or arrow keys) or clicking on a component but before performing an action on it. Simply moving focus to a text input, button, link, or other interactive element should never cause an unexpected action. Tooltips, status messages, and visual focus indicators that appear on focus are not changes of context and are perfectly acceptable. This criterion specifically targets the scenario where focusing on an element causes something unexpected and disruptive to happen without the user having taken any deliberate action beyond navigating.

Why It Matters

Keyboard users and screen reader users navigate sequentially through interactive elements using the Tab key. If tabbing to an element causes an unexpected change of context -- such as opening a new page, submitting a form, or launching a popup -- users become disoriented because they did not intend to take any action beyond moving focus. Screen reader users are particularly affected because they cannot see the page change happening and may not realize why their focus has shifted or why different content is now being announced. Users with cognitive disabilities may become confused by unexpected changes, as they expected only to explore the available options before making a deliberate choice. Users with motor disabilities who may accidentally focus on elements due to imprecise navigation are especially impacted because every unintended focus event triggers a disruptive change. Predictable behavior is a fundamental principle of usable interfaces: users should always feel in control of what happens on the page.

Common Failures and How to Fix Them

Select dropdown that navigates on focus change

A navigation dropdown menu immediately navigates to a new page when the selected option changes via keyboard arrow keys. Keyboard users cannot browse the options without being navigated away from the current page.

Inaccessible 
<label for="page-nav">Go to page:</label>
<select id="page-nav" onchange="window.location.href = this.value">
  <option value="/home">Home</option>
  <option value="/about">About</option>
  <option value="/contact">Contact</option>
</select>
<!-- Keyboard users pressing arrow keys trigger navigation immediately -->
Accessible 
<label for="page-nav">Go to page:</label>
<select id="page-nav">
  <option value="/home">Home</option>
  <option value="/about">About</option>
  <option value="/contact">Contact</option>
</select>
<button onclick="window.location.href = document.getElementById('page-nav').value">Go</button>
<!-- User selects an option, then explicitly clicks Go to navigate -->

Link or button that opens a popup on focus

A link or button opens a new window or modal dialog as soon as it receives keyboard focus, before the user has pressed Enter or Space to activate it. Users who are simply tabbing through the page encounter unexpected popups.

Inaccessible 
<a href="/help" onfocus="window.open('/help', 'helpWindow', 'width=400,height=300')">Help</a>
<!-- Focusing the link opens a new window before activation -->
Accessible 
<a href="/help" target="_blank" rel="noopener noreferrer">Help (opens in new window)</a>
<!-- New window only opens when the user clicks or presses Enter -->

How to Test

  1. Tab through every interactive element on the page using the keyboard and verify that no change of context occurs simply by focusing on an element (no new windows, no navigation, no form submission).
  2. Pay special attention to select dropdowns, links, buttons, and form fields that may have onfocus event handlers.
  3. Use a screen reader to navigate through the page and listen for any unexpected announcements of new pages loading, focus shifting, or content significantly changing upon focus.
  4. Search the source code for onfocus event handlers and focus-related JavaScript listeners to identify potential changes of context triggered by focus.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria