Focus Visibility

Checks that focus styles have not been improperly removed.

What is this check?

This check looks for CSS rules that remove the `outline` from focused elements (e.g., `*:focus { outline: none; }`).

Why is it important?

The focus outline is a critical visual indicator for keyboard users to know which element on the page currently has focus. Removing it without providing a clear alternative makes the site impossible to navigate for these users.

What is the impact?

This is a very common but serious accessibility issue that completely breaks keyboard navigation.

Example Implementation

/* BAD - DO NOT DO THIS */
button:focus, a:focus {
  outline: none;
}

/* GOOD - Provide a custom, visible alternative */
button:focus {
  outline: none;
  box-shadow: 0 0 0 3px blue;
}