WCAG 2.2 Demo Suite

2.4.7 Level AA Guideline 2.4 Navigable Added in WCAG 2.0 Partly detectable automatically

Focus Visible

Any keyboard operable interface has a mode of operation where the keyboard focus indicator is visible.

Who this affects

Every sighted keyboard user. Without a visible indicator you cannot tell which control Enter will activate — the interface becomes guesswork.

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.7

Open the failing example in a new tab

fail.html — the problem

<h1>Checkout</h1>

<!-- Every control below is perfectly operable by keyboard. The problem is
     purely that you cannot SEE which one is focused, which makes the page
     unusable for a sighted keyboard user. -->
<p><a href="#basket">Back to basket</a></p>

<div class="field">
  <label for="promo">Promotion code</label>
  <input type="text" id="promo">
</div>

<p>
  <button type="button" class="button button--secondary">Apply code</button>
  <button type="button" class="button">Pay now</button>
</p>

<p id="basket">Your basket: 2 items.</p>

Meets 2.4.7

Open the passing example in a new tab

pass.html — the fix

<h1>Checkout</h1>

<p><a href="#basket">Back to basket</a></p>

<div class="field">
  <label for="promo">Promotion code</label>
  <input type="text" id="promo">
</div>

<p>
  <button type="button" class="button button--secondary">Apply code</button>
  <button type="button" class="button">Pay now</button>
</p>

<p id="basket">Your basket: 2 items.</p>

How to test it

Tab through the page and confirm you can always see where focus is. The single most common cause of failure is a stylesheet containing outline: none with no replacement.

  • Automated

    A blanket outline:none is sometimes detectable, but a focus style's actual visibility must be confirmed by eye.

    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