Operable · 2.4 Navigable

Focus Visible WCAG 2.4.7 · Level AA

Any keyboard-operable user interface must have a mode of operation in which the keyboard focus indicator is visible, so users can always see which element has focus.

Level
AA
Since
WCAG 2.0
Principle
Operable
Guideline
2.4 Navigable
Try the live demo All criteria Checklist

Live demo

Tab through the product card

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 size menu, the button and the link. Look for a visible sign of which one has focus.

Live example

Passes

Trail walking boots

Waterproof leather boots with a grippy sole, £89.00.

View the size guide

What happened

    Why it passes

    A thick outline appears around whatever has focus, so you always know which control Enter or Space will act on.

    Why it fails

    The CSS removes the focus outline and puts nothing in its place. The log shows focus moving, but nothing on screen changes, so a keyboard user cannot tell what they are about to activate.

    Examples

    Code that fails, and the fix

    Four 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 5 lines

    Fails

    Outline removed with no replacement

    Live preview

    CSS
    a:focus,button:focus,input:focus {  outline: none;}

    This removes the browser's focus indicator and adds nothing in its place, so keyboard users cannot see where they are (failure F78).

    Passes

    A clear indicator for keyboard focus

    Live preview

    CSS
    a:focus-visible,button:focus-visible,input:focus-visible {  outline: 3px solid #1d4ed8;  outline-offset: 2px;}

    A thick outline appears around the control that has focus (technique C15). Browsers apply :focus-visible whenever focus arrives from the keyboard, so keyboard users always see it.

    Fails

    Script that throws focus away

    Live preview

    JavaScript
    document.querySelectorAll(".toolbar button").forEach((button) => {  button.addEventListener("focus", () => button.blur());});

    Removing focus as soon as it arrives means no indicator can ever be seen, and keyboard users lose their place (failure F55).

    Passes

    Keep the browser's own indicator

    Live preview

    CSS
    /* No outline or focus rules: the browser's focus ring stays */button {  padding: 0.5rem 1rem;  border: 1px solid #6b7280;  border-radius: 6px;  background: #ffffff;}

    Leaving the default focus indicator in place meets 2.4.7, as long as nothing else hides it (technique G165).

    Why it matters

    Who it helps

    Sighted keyboard users, including people with motor disabilities and those using switch devices, need to see where focus is to know which element will respond to their next keystroke.

    W3C: Understanding 2.4.7

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

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

      No WCAG 1.0 checkpoint maps to it.

    • 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 and confirm a visible focus indicator appears on each one.
    2. Pay particular attention to custom controls, links within text and components inside dialogs, menus and carousels, where indicators are often removed.

    Common failures

    Where it breaks

    • A stylesheet removes the browser's focus outline, for example by setting outline to none, and adds no replacement style.
    • Keyboard focus lands on links inside a collapsed or off-screen menu, leaving nothing visible to show where focus is.

    On the Accessibility Checklist

    Related