Operable Guideline 2.4 Navigable

2.4.7 Focus Visible

You must be able to see which element has keyboard focus

Level AA Needs a person to check

What it asks for, in plain English

When someone moves keyboard focus onto a link, button or field, there must be something visible that shows where it is. Browsers draw a focus ring by default. The most common failure is a stylesheet that removes it with outline: none, usually because a designer disliked how it looked on mouse clicks, and replaces it with nothing.

The indicator can be anything visible: an outline, a background change, an underline, a border. It just has to be there, on every focusable element, in every state.

This criterion asks for an indicator to exist; it does not set a size or contrast. In practice a thin pale ring is useless, so make it a solid 2 pixel outline in a colour that stands out.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 2.4.7 page has the full intent, techniques and definitions.

Who it affects

A sighted keyboard user presses Tab a dozen times, sees nothing change, and has no idea which button Enter will press.

Someone with a motor impairment using switch access depends entirely on seeing focus move to know when to activate.

A person with low vision cannot find a faint one pixel dotted outline against the page.

Example

Broken

The focus ring is switched off. Press Tab and nothing changes; you cannot tell which of the three has focus.

Fixed

A clear blue outline follows the keyboard. :focus-visible keeps it off for mouse clicks, which is what the designer wanted anyway.

Show the markup behind both examples
Broken
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}a,button{outline:none}a{color:#1d4ed8;margin-right:16px}button{padding:7px 14px;border:1px solid #6b7280;border-radius:6px;background:#f9fafb}</style>
<p style="margin:0 0 10px">Click in this frame, then press Tab:</p>
<a href="#">Your account</a><a href="#">Help</a><button type="button">Sign out</button>
Fixed
<style>body{margin:0;padding:16px;font-family:system-ui;font-size:15px}a:focus-visible,button:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}a{color:#1d4ed8;margin-right:16px}button{padding:7px 14px;border:1px solid #6b7280;border-radius:6px;background:#f9fafb}</style>
<p style="margin:0 0 10px">Click in this frame, then press Tab:</p>
<a href="#">Your account</a><a href="#">Help</a><button type="button">Sign out</button>

How to check it

  1. Click on the page background, then press Tab repeatedly. At every stop you should be able to see which element has focus.
  2. Check links in body text, buttons, form fields, custom controls and anything in the header and footer.
  3. Look at focus on dark backgrounds and on coloured buttons; a blue ring vanishes on a blue button.
  4. Search the CSS for outline: none and outline: 0 and check each one has a replacement.

What Websight checks for 2.4.7

Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.

Only a person can check this. A scanner cannot press Tab and look. Websight lists it in its manual checklist.

Practical tips

  • Use :focus-visible for the indicator so it shows for keyboard users and stays quiet for mouse clicks.
  • Make it 2 to 3 pixels, solid, with outline-offset so it sits outside the element, in a colour with at least 3 to 1 contrast against the background.
  • Set one global focus style for all interactive elements rather than styling each component separately.

Scan your page and see where 2.4.7 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.