Focus Visible

This lesson explains Focus Visible in web accessibility with clear examples, practical use cases, and implementation best practices.

Focus Visible Overview

Focus Visible is an important Web Accessibility requirement that ensures keyboard users can always identify which interactive element currently has focus. A visible focus indicator improves navigation, reduces confusion, and helps users interact confidently with forms, menus, dialogs, and other interface components.

According to the Web Content Accessibility Guidelines (WCAG), every keyboard-focusable element should display a clear visual indicator when it receives focus. Developers should never remove focus outlines unless they provide an equally visible replacement.

Feature	Benefit
Visible Focus	Shows users the active element.
Keyboard Navigation	Improves navigation without a mouse.
WCAG Compliance	Supports accessibility requirements.
Screen Reader Support	Works together with keyboard focus.
User Experience	Reduces navigation errors.
Accessibility	Improves usability for everyone.

Focus Visible Example

button:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 3px;
}

The :focus-visible pseudo-class displays a focus indicator only when keyboard users navigate to an element, providing a cleaner user experience while maintaining accessibility.

Where Focus Indicators Are Needed

Every interactive element that can receive keyboard focus should display a visible focus indicator. This helps users identify their current location while navigating a webpage.

Element	Needs Focus Indicator	Example
Buttons	Yes	Submit, Save, Delete
Links	Yes	Navigation menus
Form Controls	Yes	Input, Select, Textarea
Checkboxes	Yes	Preferences
Radio Buttons	Yes	Option selection
Custom Components	Yes	Tabs, Menus, Accordions

Focus Visible Best Practices

Best Practice	Description
Use :focus-visible	Display focus only for keyboard navigation.
Maintain High Contrast	Ensure focus indicators are easy to see.
Never Remove Focus	Do not disable outlines without providing a replacement.
Use Consistent Styles	Apply the same focus appearance across the website.
Test with Keyboard	Verify every interactive element displays focus.
Support Custom Components	Add focus styles to menus, dialogs, tabs, and widgets.

Common Focus Visible Mistakes

Removing outline styles with outline: none.
Using focus colors with poor contrast.
Applying focus styles only to links.
Ignoring custom components.
Using tiny or difficult-to-see focus indicators.
Not testing keyboard navigation.
Using hover styles instead of focus styles.
Making focus indicators inconsistent across pages.

Key Takeaways

Every keyboard-focusable element should display a visible focus indicator.
The :focus-visible pseudo-class provides the best user experience.
Never remove browser focus outlines without an accessible replacement.
Focus indicators should be highly visible and consistent.
Keyboard navigation should always be tested before deployment.
Visible focus improves accessibility, usability, and WCAG compliance.

Pro Tip

If you customize focus styles, make them even more noticeable than the browser default. A thick, high-contrast outline with sufficient spacing is easier for keyboard users to follow than a subtle border or color change.