In plain English
Level AA (2.4.7) only asks that a keyboard focus indicator exists. This AAA rule adds quality standards so the indicator is actually easy to see: think of it as an outline at least 2px thick, wrapping the control, with strong (3:1) contrast against the unfocused state.
The most common way people fail this is by deleting the browser’s default outline
in CSS (outline: none) and either replacing it with something faint or nothing at
all.
Who this is for
- Keyboard-only users, who need to see where they are on the page.
- Low-vision users, for whom a thin, low-contrast outline is invisible.
How to check and fix it yourself
Tab through your page and check the highlight on each control is thick and obvious.
Never ship outline: none without a strong replacement.
/* a clear, compliant focus indicator */
:focus-visible {
outline: 3px solid #1b4dff;
outline-offset: 2px;
}Where we can help
We tab your store and rate each focus indicator against the size-and-contrast bar,
flagging faint outlines and any outline: none with no replacement. It is one of
the new WCAG 2.2 items and a frequent
common failure.