Hidden Focus Detector
Invisible keyboard focus is often introduced by a single global CSS selector (outline: none) and makes the entire interface inaccessible by keyboard. It is rarely detected without active testing. This tool analyses your CSS and identifies the offending rules.
Detects CSS rules that hide the keyboard focus indicator, violating WCAG 2.4.7. Analysis runs entirely in your browser — no data is transmitted.
How to use this tool
- 1Enter the URL of the page to analyse
- 2The tool fetches and analyses the stylesheets
- 3CSS rules hiding focus are listed
- 4Identify the offending selectors to fix
Why it matters
WCAG 2.1 criterion 2.4.7 (Level AA) requires that keyboard focus is always visible. A CSS rule `outline: none` or `outline: 0` applied globally makes the entire interface inaccessible to keyboard navigation and assistive technologies. It is one of the most frequent and easiest non-conformities to introduce accidentally into a stylesheet.
Frequently asked questions
Why should you never use outline:none in CSS?
`outline: none` removes the keyboard focus indicator on interactive elements, making keyboard navigation impossible for people who do not use a mouse. It is a WCAG 2.4.7 and RGAA 10.7 non-conformity.
How can you make focus visible without an ugly outline?
Replace `outline: none` with a custom focus style: `outline: 2px solid #005fcc; outline-offset: 2px`, or use `box-shadow` for a design-integrated look. The `:focus-visible` pseudo-class lets you apply this style only for keyboard users.
Does the focus criterion apply to JavaScript components?
Yes. Every interactive component, whether native HTML or JavaScript-built (modals, dropdowns, sliders), must display a visible focus when it receives keyboard focus. Criterion 2.4.7 applies without exception to all focusable elements.