WCAG 2.2 Demo Suite

2.4.13 Level AAA Guideline 2.4 Navigable Added in WCAG 2.2 Not detectable automatically

Focus Appearance

The focus indicator is at least as large as a 2 CSS pixel perimeter of the focused control, and has a contrast ratio of at least 3:1 between its focused and unfocused states.

Who this affects

Low-vision keyboard users, for whom a thin 1px light-grey outline satisfies 2.4.7 in principle but is invisible in practice.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.13

Open the failing example in a new tab

fail.html — the problem

<h1>Checkout</h1>

<p><a class="thin" href="#a">Too thin: a 1px outline</a></p>
<p><a class="faint" href="#a">Too faint: 3px but only 1.6:1 against the page</a></p>
<p><button type="button" class="shift">Too subtle: a slight fill change only</button></p>

<!-- All three satisfy 2.4.7 at AA, which only asks that SOME visible indicator
     exists. 2.4.13 at AAA is what puts numbers on "visible": a minimum area
     and a minimum contrast change. -->

<p id="a">Target.</p>

Meets 2.4.13

Open the passing example in a new tab

pass.html — the fix

<h1>Checkout</h1>

<p><a href="#a">A link with a 3px, 8:1 focus ring</a></p>
<p><button type="button" class="button">A button with the same ring</button></p>
<p><button type="button" class="dark">A dark button with a two-tone ring</button></p>
<p class="field"><label for="p">Promotion code</label><input type="text" id="p"></p>

<!-- What 2.4.13 actually requires:
       AREA     - the indicator is at least as large as the area of a 2 CSS
                  pixel thick perimeter of the unfocused control
       CONTRAST - at least 3:1 between the focused and unfocused states of
                  those changed pixels
       and the indicator must not be obscured (which is 2.4.11 and 2.4.12).

     Practical shortcut: a 2px or thicker solid outline, in a colour at 3:1 or
     better against its surroundings, with a small offset, passes every time.
     You do not need to compute perimeter areas if you simply use an outline.

     Never write `outline: none` without replacing it. If you dislike the ring
     on mouse click, :focus-visible already solves that - it shows the ring for
     keyboard users and hides it for pointer users. -->

<p id="a">Target.</p>

How to test it

Measure the indicator's thickness and its contrast against both the adjacent colours and its own unfocused state. A 2px solid outline with sufficient contrast is the straightforward way to pass.

  • Automated

    Requires measuring the rendered indicator's size and contrast.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification