Understandable · 3.2 Predictable

On Focus WCAG 3.2.1 · Level A

When any user interface component receives focus, that alone must not trigger a change of context, such as opening a new window, submitting a form, moving focus to another component, or changing content in a way that alters the meaning of the page. Revealing a submenu or tooltip on focus is allowed.

Level
A
Since
WCAG 2.0
Principle
Understandable
Guideline
3.2 Predictable
Try the live demo All criteria Checklist

Live demo

Tab through a delivery form

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Press Tab to move through the form in each version. Stop on the delivery prices link without activating it.

Live example

Passes

Delivery address

Delivery prices (opens in a new window)

What happened

    Why it passes

    You can tab past the delivery prices link and keep filling in the form. The window opens only if you choose to activate the link.

    Why it fails

    Just tabbing onto the link opens a window and moves your focus into it, so you are pulled out of the form without asking.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Dialog opens when a field gets focus

    Live preview

    JavaScript
    const zip = document.querySelector("#zip");const finder = document.querySelector("#address-finder"); // a <dialog> zip.addEventListener("focus", () => {  finder.showModal();});

    Tabbing into the ZIP code field opens a modal dialog and moves focus into it. Focus alone has caused a change of context, which 3.2.1 does not allow.

    Passes

    Dialog opens only when asked

    Live preview

    JavaScript
    const findButton = document.querySelector("#find-address");const finder = document.querySelector("#address-finder"); // a <dialog> findButton.addEventListener("click", () => {  finder.showModal();});

    The dialog opens only when the person presses the Find address button, so tabbing through the form never changes the context.

    Fails

    Focus removed as soon as it arrives

    Live preview

    JavaScript
    const total = document.querySelector("#order-total"); total.addEventListener("focus", () => {  total.blur();});

    Script throws focus away the moment the field receives it, so keyboard users lose their place. WCAG documents this as failure F55.

    Passes

    Read-only field instead of blur

    Live preview

    HTML
    <label for="order-total">Order total</label><input id="order-total" name="total" value="$42.50" readonly>

    readonly stops editing without touching focus, so people can still tab to the field and hear its value.

    Passes

    Submenu shown on focus is allowed

    Live preview

    CSS
    .menu .submenu { display: none; } .menu:hover .submenu,.menu:focus-within .submenu { display: block; }

    Showing a submenu when its parent link gets focus changes content, not context. Focus stays where the person put it, so this meets 3.2.1.

    Why it matters

    Who it helps

    Keyboard and screen reader users move focus to explore a page, and people with visual or cognitive disabilities can be disoriented when something major happens just because focus arrived. Predictable focus lets them explore safely.

    W3C: Understanding 3.2.1

    • Level A

      Level A is the minimum: failing it can shut some people out completely.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      WCAG 1.0 checkpoints: 10.1

    • Where it is required

      Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Tab through every interactive element, stopping on each one without activating it.
    2. Confirm no new window opens, no form submits, the page does not navigate, and focus is not moved elsewhere.
    3. Repeat by clicking into form fields and with a screen reader to confirm that focus alone changes nothing major.

    Common failures

    Where it breaks

    • A form submits or the page navigates as soon as a field or link receives focus.
    • A pop-up window or modal dialog opens automatically when a control is focused.
    • Script moves focus away from an element the moment it receives focus.

    Related