On Focus

In brief

Keyboard and screen reader users move focus through a page just to find out what is there. If simply landing on a control opens a window, submits a form or throws focus somewhere else, the page becomes impossible to explore and the user loses their place.

This criterion requires that when any user interface component receives focus, it does not initiate a change of context.

What does it cover?

• What is a change of context: A change of context is a major change that can disorient users who cannot see the whole page at once: a change of user agent, viewport, focus, or of content that changes the meaning of the page. Opening a new window, moving focus to another component, loading a new page or significantly rearranging the page all count.
• Focus, not activation: The rule is about receiving focus, by keyboard or by mouse. A change that happens after the user activates a control, for example by pressing a button, is not covered here.
• Hover: Hovering does not move focus, so it is not covered, unless script makes it do so.
• Not every content change counts: Expanding an outline, opening a dynamic menu or switching a tab panel is not a change of context unless it also changes focus or another item above.
• The technique: Use "activate" rather than "focus" as the trigger (G107). The same control may still show a hint or tooltip on focus.
• Out of scope: Changes caused by changing a setting are 3.2.2. Visible focus is 2.4.7. Focus order is 2.4.3.

Who does it affect?

Keyboard users, who move focus through every control. Screen reader users, who cannot see the whole page and rely on predictable behaviour. People with cognitive disabilities, for whom unexpected changes cause confusion. People with low vision using magnification, who see only a small part of the page. People with motor disabilities who tab or click accidentally.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Predictable behaviour on focus is part of "understandable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 3.2.1 by reference and turns it into separate clauses for each kind of ICT.

Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 3.2.1 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. A menu that navigates when it receives focus

Tabbing past a list that jumps to a new page makes the rest of the page unreachable. Navigate on activation instead (G107).

<select onfocus="location.href=this.value">…</select>

<label for="go">Go to</label>
<select id="go">…</select>
<button type="button" onclick="location.href=go.value">Go</button>

2. A field that opens a window on focus

Opening a new window is a change of context. Open it from a button.

<input onfocus="window.open('/help')">

<input id="code">
<a href="/help" target="_blank" rel="noopener">Help finding your code (opens in a new tab)</a>

3. Script that moves focus on focus

Moving focus automatically to another component, such as the next field, takes control from the user.

first.addEventListener("focus", () => second.focus());

<!-- Let the user decide where focus goes -->
<input id="first"> <input id="second">

4. A full-screen search opened by focus

Opening a modal dialog moves focus and rearranges the page. Open it on click or Enter.

search.addEventListener("focus", openFullScreenSearch);

openSearchBtn.addEventListener("click", openFullScreenSearch);

5. Script that removes focus

Calling blur() when an element gets focus makes the page hard or impossible to use by keyboard (F55).

link.addEventListener("focus", () => link.blur());

/* Do not remove focus. Style it instead */
a:focus-visible { outline: 3px solid #0b5fff; outline-offset: 2px; }

6. What is allowed: a hint on focus

Showing helper text when a field receives focus is a content change, not a change of context, because focus does not move and nothing navigates.

<input onfocus="location.href='/next'">

<label for="pw">Password</label>
<input id="pw" type="password" aria-describedby="pw-hint">
<p id="pw-hint">At least 12 characters.</p>

Code examples for mobile

On mobile, focus moves when a screen reader user swipes or a keyboard user tabs. Do not navigate or open sheets from a focus callback. Use the control's activation.

iOS (SwiftUI)

import SwiftUI

struct HomeView: View {
    @State private var showHelp = false

    var body: some View {
        // Activation opens the help sheet; merely focusing the button does not
        Button("Help") { showHelp = true }
            .sheet(isPresented: $showHelp) { HelpView() }

        // Avoid: reacting to focus changes by navigating or presenting
        // .onChange(of: focusedField) { _, _ in showHelp = true }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun HelpButton(onOpenHelp: () -> Unit) {
    // Activation opens help; receiving focus does not
    Button(onClick = onOpenHelp) { Text("Help") }

    // Avoid: Modifier.onFocusChanged { if (it.isFocused) onOpenHelp() }
}

How to test

• Tab through the page: Move through every control with the Tab key. Does anything open, submit, navigate or move focus on its own?
• Click into fields: Click or tap each field and menu. Does the page change before you activate anything?
• Search the code: Look for focus and onfocus handlers that open windows, change the location, submit forms or call focus() or blur().
• Use a screen reader: Move through controls with the arrow keys. Is anything triggered by arriving on a control?
• Check widgets: Date pickers, autocompletes, custom selects and third-party widgets often react to focus.
• Check what is allowed: Tooltips, hints and expanded text on focus are fine, as long as focus does not move and nothing navigates.
• Use a checker as a starting point: Automated tools cannot judge what a focus handler does. A person must test the keyboard path.

Common mistakes

• Navigation on focus: A select list or link that goes to a new page when it receives focus.
• New windows opened on focus: A pop-up when a field is reached.
• Script that moves focus: Jumping to the next field when a field gets focus.
• Script that removes focus: A blur() call on focus (F55).
• Full-screen overlays on focus: Search or chat panels that take over when tabbed to.
• Auto-advancing fields: Moving to the next field as soon as it is reached.
• Treating activation as focus: Pressing Enter on a button is activation and is allowed to change context.
• Forgetting third-party widgets: Libraries often add their own focus behaviour.

Sources

• Understanding SC 3.2.1: On Focus (W3C), opens in a new tab
• G107: Using "activate" rather than "focus" as a trigger for changes of context (W3C), opens in a new tab
• F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.