The One-Line CSS Reset That Wipes Out Keyboard Accessibility
A global CSS reset applied early in a project includes outline: none
on all interactive elements, because the default blue outline "clashed
with the brand design." No replacement focus style was ever added.
Which WCAG success criterion does this break?
The correct answer is "SC 2.4.7, Focus Visible."
SC 2.4.7 requires that the currently focused element always have a visible indicator. Removing the default outline with no replacement breaks this for two overlapping groups: a keyboard-only user can't tell which element is focused or what Enter will activate next, and a low-vision user loses a strong visual cue even if they can technically use a mouse.
SC 2.4.3 (Focus Order) concerns the sequence focus moves through, not whether it's visible. SC 1.4.3 is the text contrast minimum, a different check. SC 2.1.1 (Keyboard) concerns whether elements are operable via keyboard at all, which is a separate failure from focus simply being invisible.
Share this question