Keep the platform's default focus indicator
Operating systems draw their own focus indicator, and many let people make it thicker, brighter, or a different color. G165 says use that indicator. Every one of those system settings then carries through to your site automatically. Draw your own instead and the carry-over stops, so somebody who configured a high-visibility ring gets yours at whatever contrast you happened to choose. Assistive technology often cannot find an author-drawn indicator either. This is a sufficient technique for 2.4.7 Focus Visible at Level AA. W3C admits the default is not always highly visible on its own, which is why WCAG 2.2 added a Level AAA rule setting a size and contrast floor for the indicator itself. On this rule, visible means present rather than adequate.
How we find it in an audit
Our reviewers tab the whole site looking for the outline that was removed and never replaced. It is still the most common single defect we find. Where a site draws its own indicator, we test it against every background it appears on, and check whether the operating system's high-visibility setting still has any effect at all.
How affected users experience it
A sighted keyboard user with a motor disability may spend an entire session inside the focus ring. It is the only marker of where they are. When a global rule strips it out to tidy up the design, they tab blind, counting stops from the last landmark they recognized and never certain what Enter will fire. It is the accessibility equivalent of hiding the mouse pointer.
Passes vs. fails
Passes
The site leaves default focus outlines untouched, so browser and operating system high-visibility focus settings carry through to every control.
Fails
A global stylesheet sets *:focus { outline: none } to clean up the design and puts nothing in its place.How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Element in sequential focus order has visible focusA tool can check this
Other ways to satisfy this rule
9 guides on this site are filed under 2.4.7 Focus Visible. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- C15sufficientStyle the focus indicator instead of removing it
- C40sufficientBuild focus indicators that work on any background
- C45sufficientShow keyboard focus with :focus-visible
- G149sufficientUse components the browser highlights on focus
- G195sufficientShip a clearly visible custom focus indicator
- SCR31sufficientHighlight the focused element with script
This guide is our interpretation of W3C technique G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.