How to use this tool
- Paste your CSS into the input area.
- Review the checker output for outline removal without visible replacement.
- Add border, box-shadow, or another visible focus indicator where flagged.
About Focus Style Checker
This tool helps developers avoid removing focus outlines without providing an alternative, which harms keyboard users. It uses heuristics and does not replace testing with actual keyboard navigation.
Common use cases
- Auditing CSS for outline: none or outline-width: 0 in focus rules
- Ensuring :focus-visible has a visible indicator before shipping
- Catching global outline removal that affects all focusable elements
FAQ
- What does this focus style checker do?
- It scans CSS for :focus and :focus-visible rules and flags cases where outline is removed (outline: none, outline: 0) without a visible replacement like border or box-shadow.
- Does this tool send my CSS to a server?
- No, all analysis runs locally in your browser. Your CSS is never sent to a server or stored.
- What counts as a visible focus replacement?
- The checker treats border, box-shadow, background, or a non-zero outline as visible replacements. It uses simple pattern matching and may miss custom indicators.
- Why does outline: none need a replacement?
- Keyboard users rely on the focus outline to see which element is focused. Removing it without an alternative makes navigation difficult or impossible for some users.