Glossary · Accessibility term

Focus visible

Focus visible is two things with nearly the same name, and keeping them apart settles an argument. Rule 2.4.7 is the WCAG requirement, at Level AA, and its actual words are that a keyboard operable interface has a mode of operation where the focus indicator is visible. Not always visible. A mode. The CSS focus-visible pseudo-class is the other thing, a selector browsers match when their own heuristics decide an indicator would help, which in practice means the keyboard and other non-pointer input. That mode wording is what makes the pseudo-class safe rather than clever, because the keyboard is a mode where the indicator appears. And 2.4.7 sets no contrast ratio at all. The 3:1 people quote comes from rule 1.4.11, which excepts an indicator the browser drew and you never restyled, and the rules about the indicator's area and its change between states come from 2.4.13, which is Level AAA.

In practice

The two solve the same argument from opposite ends. Designers strip focus outlines because they turn up on mouse clicks and look untidy. The focus-visible pseudo-class shows the indicator only when the browser judges it useful, so the outline appears for the keyboard and stays out of the way of the mouse. Browsers now use it for their own default focus style, which is why they stopped drawing a ring on every click, and it is the real reason the design objection has no force left. Support has been broad across browsers since March 2022.

The browser's judgement is a set of heuristics rather than a rule, and three of them surprise people. Click a text input with a mouse and it does match, because the field takes keyboard input. Move focus with a script and the new element inherits whether the previous one was showing an indicator. And an element that takes focus in a freshly opened dialog should show one, even though a mouse opened the dialog.

Whatever you draw has to hold up. It needs 3:1 contrast against what sits next to it, which comes from rule 1.4.11 rather than from 2.4.7, and which lets the browser's own untouched ring off. Draw your own and the ratio is yours. It also has to work on every background it can land on, including dark sections and coloured buttons. It also cannot be temporary. W3C says the indicator must not be time limited, so a focus ring that fades out after a second fails a rule while it looked like a nice touch.

Why it matters

Removing the outline and putting nothing back is the most common cause of keyboard failures we find. Somebody who cannot see where they are cannot act, and they are not only keyboard users. W3C names people with attention limits, short term memory limits and difficulties with executive processes as benefiting from being able to find the focus. What makes this one satisfying is that the trade-off has gone. The pseudo-class gives the design what it wanted and the keyboard what it needs, and it has done so in every major browser for years.

The one-line failure

A stylesheet that sets the outline to none, added because the default ring clashed with the design, with nothing put back in its place. It is still the most common keyboard finding there is. And since browsers took over the job of deciding when to draw the ring, there is no longer a design reason to write that line.

Where this shows up on the site

Related terms

Knowing the word is the easy part.

Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.

Run the free scan