Level A

Focus is a passive event fired during keyboard navigation -- any change of context wired to it fires before the user has decided to activate the control

3.2.1 On Focus

In Plain Language

3.2.1 On Focus (Level A) says receiving focus on a component must not, by itself, cause a change of context[1]. A "change of context" is defined narrowly by WCAG: opening a new window, moving focus to a different component, navigating to a new page, or significantly rearranging page content so that its meaning changes.

The trigger for a context change must be explicit user activation -- click, Enter, Space, form submit, or a deliberate change the user has completed -- never the focus event that fires when a keyboard user tabs through the page.

Why It Matters

  • Keyboard users reach every interactive control by tabbing. If focus alone navigates, opens a window, or moves focus elsewhere, the user is dropped somewhere they did not choose to go and has no way to preview a control before activating it.
  • Screen-reader users announce each element as focus lands on it. A context change fired from focus interrupts the announcement and moves the virtual cursor, so the user never hears what the control was for.
  • Switch users and users of on-screen keyboards step through the tab order one element at a time. A focus-triggered action is effectively an activation they cannot cancel -- there is no "hover without clicking" equivalent for sequential input.
  • Users with cognitive and learning disabilities depend on predictability: controls behave when activated, not when inspected. Unprompted navigation or dialog pop-ups on focus break that contract.

Examples

Do: Require explicit activation to navigate

✔ Selecting an option does not navigate -- the user must click Go

<label for="lang-select">Choose language:</label>
<select id="lang-select">
  <option>English</option>
  <option>Spanish</option>
  <option>French</option>
</select>
<button type="button">Go</button>
<!-- Navigation only happens on button click -->
Don't: Navigate on focus

<a onfocus='window.location=...'>

✘ Tabbing to this link immediately navigates away -- the user never chose to activate it

<!-- FAILS: navigates on focus alone -->
<a href="/promo"
   onfocus="window.location='/promo'">
  Special Offer
</a>
<!-- User is redirected just by tabbing here -->
Do: Use focus for visual cues only

✔ Focus changes the visual style -- no context change occurs

<label for="email">Email:</label>
<input type="email" id="email"
  placeholder="you@example.com">

<style>
input:focus {
  border-color: #1a6b5a;
  outline: 2px solid #1a6b5a;
  outline-offset: 2px;
}
</style>
<!-- Focus highlights the field -- no context change -->
Don't: Open a dialog on focus

<input onfocus='openModal()'>

✘ Focusing on the input opens a modal dialog -- the user did not request this

✘ Keyboard users cannot explore the form without triggering popups

<!-- FAILS: modal opens on focus -->
<input type="text" name="address"
  onfocus="openAddressModal()">
<!-- Tabbing into this field triggers a dialog -->

How to Fix It

  1. Audit every focus handler on the page. Grep for onfocus=, addEventListener('focus', addEventListener('focusin', and framework equivalents (@focus, onFocus). Any handler that calls window.location, window.open, form.submit(), router.push(), or opens a modal is a 3.2.1 failure. Move the side effect to click, keydown (Enter/Space), or an explicit submit.
  2. Gate auto-submitting <select> menus behind a button. A <select onchange="form.submit()"> looks like an "on input" failure, but keyboard users navigating with the arrow keys fire change on every option as focus moves through the list, which is the 3.2.1 failure mode. Add a Go button and submit on click, or require the user to close the dropdown (Enter/Tab) before the change is acted on -- and if you still need to act on change, warn the user in advance per 3.2.2 On Input.
  3. Reserve :focus and focus for presentational feedback. Visible focus indication (:focus-visible outlines, revealing a tooltip, expanding a label) does not change context and is allowed -- required, in fact, by 2.4.7 Focus Visible. What is not allowed is moving focus elsewhere when the element receives focus, a pattern the Understanding document calls out as a common failure[1].
  4. Test with Tab only. Unplug the mouse and tab from the address bar through the end of the page. If any step causes the URL to change, a new window to open, focus to jump to an unrelated element, or the layout to rearrange, the element that just received focus is the offender.

References

  1. [1] W3C (2023). Understanding Success Criterion 3.2.1: On Focus. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/on-focus.html ↩ ↩