No visible focus indicator
Why it matters
Keyboard users need to see where they are. If focusing a control changes nothing on screen, they are lost.
How to fix it
Never remove the outline without replacing it. Add a clear :focus-visible style. Safe Fixes can add a contrast-checked ring for you.
:focus-visible { outline: 3px solid #2A3BFF; outline-offset: 2px; }Read the W3C guidance: Understanding 2.4.7 Focus Visible.
Related rules
- Click target is smaller than 24 by 24 pixels (WCAG 2.5.8)
- Click target is smaller than 44 by 44 pixels (WCAG 2.5.5)
- Focused element is hidden behind a sticky header (WCAG 2.4.11)
- Page scrolls sideways at 320px wide (WCAG 1.4.10)
Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.