• Success Criterion 2.4.7
  • Conformance level AA

Global CSS Reset Removing Every Focus Outline Site-Wide

2.4.7 — Focus Visible

Scenario

Setting

A job board's application form

What’s wrong

Global CSS reset *:focus{outline:0} with no:focus-visible (keyboard-focus styling) replacement.

Example 

*:focus {
  outline: 0;
}

Why it matters

This single reset rule wipes out every focus indicator across the entire job application, from text fields to the submit button.

How to test

Inspect the page's CSS for a global reset like *:focus{outline:0}: check whether a:focus-visible replacement exists anywhere — if not, every control loses its indicator.

How to fix

focus-visible lets you hide mouse-click outlines while keeping keyboard focus fully visible.

*:focus:not(:focus-visible) {
  outline: 0;
}
*:focus-visible {
  outline: 3px solid #005fcc;
}

Outcome

An applicant tabs through the entire form and can always tell which field is active.

Who is affected

Keyboard users filling out job applications lose all visual tracking of their position on every single control.

Learn more

Related scenarios