Missing Focus Indicators

What This Means

Focus indicators show which element is currently selected when navigating with a keyboard. They're essential for keyboard-only users and people who cannot use a mouse. Removing or hiding focus styles creates a significant accessibility barrier.

Impact:

• Keyboard users cannot see where they are on the page
• Fails WCAG 2.1 Level AA (2.4.7 Focus Visible)
• Makes navigation impossible for some users
• Legal compliance risk (ADA, Section 508)

How to Diagnose

Manual Testing

1. Put your mouse aside
2. Press Tab to navigate through the page
3. Can you always see which element is focused?
4. Is the focus indicator visible against all backgrounds?

Check CSS

Look for problematic CSS:

/* Common culprit - removes all outlines */
*:focus {
  outline: none;
}

/* Or on specific elements */
a:focus, button:focus {
  outline: 0;
}

Accessibility Tools

axe DevTools: Reports focus indicator issues.

WAVE: Flags removed focus indicators.

General Fixes

1. Don't Remove Default Focus Styles

/* Bad: Removes focus indicator */
:focus {
  outline: none;
}

/* Good: Keep default or enhance */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

2. Use :focus-visible for Better UX

/* Remove outline for mouse clicks, keep for keyboard */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

3. Ensure Sufficient Contrast

/* Light backgrounds */
:focus-visible {
  outline: 2px solid #005fcc;
}

/* Dark backgrounds */
.dark-section :focus-visible {
  outline: 2px solid #ffffff;
}

4. Style Focus Consistently

/* Consistent focus style across elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}

5. Use Box-Shadow as Alternative

/* Alternative to outline */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

6. Handle Custom Components

/* Custom button component */
.custom-button:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Custom dropdown */
.dropdown-item:focus-visible {
  background-color: #e8f0fe;
  outline: 2px solid #005fcc;
}

Platform-Specific Guides

Common Mistakes

Removing Outlines Globally

/* Never do this without replacement */
* { outline: none !important; }

Insufficient Contrast

/* Bad: Low contrast on white background */
:focus { outline: 1px solid #cccccc; }

/* Good: High contrast */
:focus { outline: 2px solid #005fcc; }

Only Styling Certain Elements

/* Incomplete - misses many focusable elements */
a:focus, button:focus { outline: 2px solid blue; }

/* Complete - covers all interactive elements */
:focus-visible { outline: 2px solid blue; }

Testing Focus Styles

Checklist

• Tab through entire page - focus always visible
• Focus visible on buttons
• Focus visible on links
• Focus visible on form inputs
• Focus visible on dropdown menus
• Focus visible in modals/dialogs
• Focus contrast meets 3:1 ratio

Browser DevTools

1. Open DevTools
2. Press Ctrl/Cmd + Shift + P
3. Type "Show focus" and select "Rendering: Emulate a focused page"
4. Navigate with Tab to test focus styles

Verification

After fixing:

1. Tab through entire page
2. Focus indicator visible on every interactive element
3. Focus indicator has sufficient contrast
4. Test on light and dark backgrounds
5. Test in different browsers

Further Reading

• WCAG 2.4.7 Focus Visible
• CSS :focus-visible
• Global Accessibility Hub