Focus indicator is visible on all focusable elements; outline not removed without replacement
Why it matters
Keyboard users must be able to see where focus is at all times—without a visible focus indicator, they are navigating blind. The most common source of this defect is a global outline: none reset in CSS, often added to suppress the default browser ring for aesthetic reasons without substituting an equivalent. WCAG 2.2 SC 2.4.7 (Level AA) requires any keyboard operable interface to have a visible focus indicator, and the new SC 2.4.11 (Level AA, added in WCAG 2.2) tightens the minimum indicator specification. Section 508 2018 Refresh 503.3.3 mandates this. Users with motor disabilities who rely on keyboard navigation are most directly harmed, but cognitive disabilities also benefit from persistent focus visibility.
Severity rationale
High because removing focus indicators makes keyboard navigation effectively unusable without completely preventing it—users can still tab, but cannot see where they are.
Remediation
Search src/ for outline: none and outline: 0. For each occurrence, either remove it or add a replacement :focus-visible style with sufficient contrast (3:1 against adjacent colors per WCAG 2.2 SC 2.4.11):
/* In globals.css or your base reset */
*:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Custom focus ring for branded elements */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #0066cc;
}
Use :focus-visible (not :focus) so mouse users don't see the ring on click, while keyboard users always do. Verify with WebAIM's contrast checker that the indicator color meets 3:1 against the surrounding background.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Section 508 Accessibility Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- wcag:2.2 · 2.4.7 — Focus Visible
- wcag:2.2 · 2.4.11 — Focus Appearance (Minimum)
- section-508:2018-refresh · 503.3.3 — Keyboard Operability — Focus Visible
Taxons
History
- 2026-04-18·v1.0.0·Initial import from gov-section-508·automated