Focus Outline Checker
Paste your page HTML and find the CSS that erases the keyboard focus ring — outline resets with no :focus replacement fail WCAG 2.4.7.
What this tool gives you
Check the focus outline
Paste your page HTML including its <style> blocks. Analysis runs locally in your browser — nothing is sent anywhere.
Include the <style> blocks or inline style attributes so the checker can see outline resets and any :focus replacement.
What this checker looks for
outline:none is the most common way sites accidentally erase keyboard focus — one rule, broken everywhere.
outline resets
Any CSS rule that sets outline: none / 0 / transparent (WCAG 2.4.7).
Replacement on :focus
A :focus rule that re-adds a visible outline after the reset.
Reset scope
Bare * or element selectors hit every control; :focus:not(:focus-visible) is the safe pattern.
Interactive inventory
Links, buttons and form fields that keyboard users must be able to see focused.
Focus-visible restyling
Custom focus rings are fine — hidden focus rings are not.
No-ring score
A 0–100 score so you can track the fix across pages.
How to fix invisible focus
One of three patterns covers almost every outline bug in the wild.
Delete the reset
Remove * { outline: none } and friends. The browser default ring is accessible — do not fight it.
Scope to pointer only
Need no ring on click? Use :focus:not(:focus-visible) { outline: none } — keyboard focus keeps the ring.
Restyle, never remove
Define your own ring: :focus-visible { outline: 2px solid currentColor; outline-offset: 2px }.
Why answer engines care about focus visibility
Focus handling is a cheap-to-parse signal of overall accessibility discipline.
| Signal | What engines infer | Why it helps |
|---|---|---|
| No outline reset | The site keeps default interaction affordances. | Correlates with other quality signals engines read. |
| Focus-visible styling | Keyboard paths were designed, not forgotten. | Consistent conventions make parsing predictable. |
| Working keyboard flow | Every control is reachable and visibly focused. | Engagement quality feeds crawl and ranking models. |
| Compliant contrast | The focus ring stands out against the background. | Usable UI lowers abandonment on AI-referred visits. |
| WCAG 2.4.7 pass | The page meets a named accessibility criterion. | Citable, trustworthy pages get quoted more often. |
Related GEO pages
Focus visibility pairs with skip links and landmarks to keep keyboard paths usable.
Focus outline FAQs
Why is outline:none considered an accessibility failure?
The CSS outline is the focus indicator keyboard users rely on. When a stylesheet removes it — usually with * { outline: none } or :focus { outline: none } to tidy up click styling — people navigating by Tab lose all visual indication of where they are on the page. WCAG 2.4.7 (Focus Visible) requires a visible focus indicator, and a removed outline with no replacement fails it.
How do I keep focus visible while restyling it?
Delete the reset, or scope it to :focus:not(:focus-visible) so mouse clicks lose the ring but keyboard focus keeps it. Then define your own indicator on :focus-visible — for example outline: 2px solid #38bdf8; outline-offset: 2px. Custom focus rings are fully compliant; invisible focus rings are not.
What is the difference between :focus and :focus-visible?
:focus matches whenever an element is focused, including mouse clicks. :focus-visible matches only when the browser decides the indicator should show — typically keyboard navigation. Targeting :focus-visible lets you hide the ring for pointer users without ever leaving keyboard users blind, which is the modern best practice.