Focus Visible
Whenever a UI component receives keyboard focus, there is a visible indicator showing where it is.
Why it matters
Without a visible focus ring, a sighted keyboard user has no way to tell which element is about to activate when they press Enter. This is one of the most common regressions — teams remove `outline: none` for aesthetics and never replace it.
Needs manual testing
Whether a focus indicator is present and actually visible against its background requires rendering the page and checking computed styles on focus — not something axe-core's static ruleset checks directly today.
Fails
button:focus {
outline: none;
}Removes the default focus ring and supplies no replacement — a keyboard user tabbing through the page sees nothing change.
Passes
button:focus-visible {
outline: 2px solid #1a56db;
outline-offset: 2px;
}A clearly visible, high-contrast outline appears on keyboard focus (and only on keyboard focus, via :focus-visible).
Openwell finds violations like this one across your whole site, clusters them by the component that caused them, and generates a fix that's re-validated before you see it.
Scan your site free