Keyboard Focus Indicator Not Visible

Why it matters

The keyboard focus indicator is to keyboard users what a mouse cursor is to mouse users — it shows exactly where you are on the page. Without a visible focus indicator, keyboard-dependent users must guess which element is currently active, making navigation impossibly slow and error-prone. This affects people with motor disabilities who use keyboards, tab-navigation users, power users navigating complex forms, and anyone who temporarily cannot use a mouse. WCAG 2.4.7 (Focus Visible) is a Level AA criterion making it legally required. WCAG 2.2 added the more specific 2.4.11 (Focus Appearance) with minimum size and contrast requirements for the focus indicator. The practice of removing outlines globally with "outline: none" in CSS is one of the most common and damaging accessibility anti-patterns in web development.

Symptoms — what you'll see

If your site has this problem, you may observe any of the following:

• Tabbing through the page shows no visual indicator of which element has focus
• CSS removes the browser default focus ring (outline: none or outline: 0)
• Custom focus styles exist in design but were not implemented in code
• Focus ring appears on some elements but disappears on others
• Keyboard users cannot tell where they are on the page during navigation
• axe DevTools flags elements with insufficient focus indicators
• WCAG 2.4.7 violation reported in accessibility audit

Common causes

• CSS resets or normalize.css overrides that include "*:focus { outline: none }"
• Designers requesting the removal of focus rings because they look "ugly" to sighted mouse users
• CSS frameworks (Bootstrap pre-5, older Tailwind configs) that suppress focus outlines by default
• Developers using :focus instead of :focus-visible, causing rings to appear on click (ugly) then removing them globally
• Copy-pasted CSS snippets from StackOverflow that remove outlines as a "fix" for visual issues
• Focus styles not tested during development because most developers use a mouse
• Third-party widgets injecting their own CSS that overrides focus styles

How to fix it

1. 1Search your CSS codebase for "outline: none", "outline: 0", and ":focus { outline" and audit every instance.
2. 2Remove any :focus { outline: none } rules that suppress focus indicators without providing alternatives.
3. 3Use :focus-visible pseudo-class instead of :focus to show focus rings only for keyboard navigation (not mouse clicks), improving aesthetics without harming accessibility.
4. 4Design focus styles that meet WCAG 2.4.11: the focus indicator must have at least 3:1 contrast against adjacent colors and enclose the component.
5. 5A good baseline: outline: 3px solid #005fcc; outline-offset: 2px applied to :focus-visible.
6. 6For custom components, ensure focus styles are applied to the actual focusable element, not a parent wrapper.
7. 7Test your focus styles in both light and dark modes, on all background colors used across your site.

/* BROKEN: removes all focus indicators globally */
*:focus { outline: none; }

/* BROKEN: only shows focus on mouse click, not keyboard */
button:focus { outline: none; }
button:active { box-shadow: 0 0 0 2px #007aff; }

/* FIXED: remove outline only for mouse users, keep for keyboard */
*:focus:not(:focus-visible) { outline: none; }

/* FIXED: visible focus ring for keyboard users */
*:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 2px;
}

/* FIXED: high-contrast alternative for dark backgrounds */
.dark-bg *:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

How to test your fix

After applying the fix, verify it works using these testing steps:

1. Tab through your entire site without a mouse and verify a visible focus indicator is present on every interactive element.
2. Check that the focus indicator has at least 3:1 contrast against the adjacent background color.
3. Open DevTools and search for "outline: none" and "outline: 0" in your compiled CSS.
4. Test in high contrast mode: Windows High Contrast Mode and macOS Increase Contrast — focus styles must remain visible.
5. Use the axe DevTools extension and check for focus-related violations.
6. Test in multiple browsers: Chrome, Firefox, and Safari render default focus rings differently.

Frequently asked questions