Style the focus indicator instead of removing it
C15 is the CSS technique for changing how a component looks when it takes focus, and W3C lists it as sufficient for 2.4.7 Focus Visible at Level AA. It reaches wider than focus, since the same technique covers the hover state, and W3C's own example changes a background color rather than drawing a ring. Name the right technique when you write this up. The pseudo-class that shows an indicator to keyboard users and not to mouse users is :focus-visible, and W3C documents that separately as C45. It is the pattern most teams actually want, and 2.4.7 allows it because the criterion asks for a mode of operation in which the indicator is visible, rather than for one that shows always. Deleting the indicator is not this technique either. An outline set to none with nothing put back is failure F78. And 2.4.7 sets no contrast ratio whatever. A ring you can technically see but not really see is judged somewhere else, under 1.4.11 for non-text contrast at 3:1, or under 2.4.13 Focus Appearance at Level AAA. That last one is the rule that sets an actual size and an actual difference. One test step gets skipped a lot. The indicator has to go away again when focus leaves.
How we find it in an audit
We tab across every audited page and watch. Where the indicator vanishes we open the delivered CSS and find the rule that removed it. A finding that names the selector gets fixed. A finding that says focus is invisible gets argued with. Rings that are present and too faint against their own background get measured rather than judged, and the finding says which rule the measurement falls under. We check the reverse as well, since an indicator left behind on a control after focus has moved on is its own failure of the technique.
How affected users experience it
This one protects sighted keyboard users. People with motor disabilities who cannot hold a mouse steady, people using a switch device, people whose trackpad has died, and anybody who simply works faster on keys. With no visible indicator they are moving a cursor that leaves no trace and pressing Enter on a target they have to guess at. Screen reader users feel this less, because their software announces where focus went, which is exactly why a sighted developer testing with a screen reader can miss the problem completely.
Passes vs. fails
Passes
:focus-visible {
outline: 3px solid #2050c7;
outline-offset: 2px;
background: #eef3ff;
}Fails
*:focus { outline: none }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
The other techniques filed under this rule
9 guides on this site are filed under 1.4.1 Use of Color. W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- G14sufficientSay in text what color alone signals
- G111sufficientPair color coding with patterns and shapes
- G182sufficientBack up color-coded text with another cue
- G183sufficientMake color-only links contrast and respond
- G205sufficientAdd text cues to color-coded field labels
- F13failureDo not write alt text that drops color meaning
This guide is our interpretation of W3C technique C15: Using CSS to change the presentation of a user interface component when it receives focus. 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.