FeaturesPricingAudit GuideFree StatementDashboard →

Add Visible Focus Indicators to Interactive Elements

Learn how to add visible focus indicators for keyboard navigation. Includes CSS examples and focus management.

6 min read
serious severityWCAG Level AAWCAG 2.1 Success Criterion 2.4.7Auto-detectable

What Is It?

A focus indicator is a visual outline, border, or background change that appears when an interactive element (button, link, input) receives keyboard focus. It must be visible and not removed with CSS.

Affected users: Keyboard users, users with motor disabilities, users with low vision, users in bright environments, screen reader users

Why It Matters

Keyboard users need to see where focus is on the page. Removing focus indicators (common with 'outline: none') makes pages unusable for keyboard users. Users with cognitive disabilities also rely on focus indicators.

Good news: Automated tools can detect missing focus styles in CSS, but verifying visibility and contrast requires manual testing.

How to Detect This Issue

Navigate with Tab key and verify a clear visual indicator appears on focused elements. Check CSS for outline: none or focus styles that remove visibility. Use browser dev tools to inspect focus states.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
button { outline: none; }
After (accessible)
button:focus { outline: 2px solid #4A90E2; outline-offset: 2px; }

Always show focus. The outline-offset property prevents the focus box from overlapping element content. Minimum 2px width for visibility.

React / Next.js

Before
button { &:focus { outline: none; } }
After
button { &:focus-visible { outline: 3px solid #4A90E2; box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2); } }

Use :focus-visible instead of :focus to show focus only for keyboard users, not mouse users (better UX). Include both outline and box-shadow for robustness.

WordPress

Before
button, input, a { outline: none; /* removes focus */ }
After
button:focus, input:focus, a:focus { outline: 2px solid #0066cc; }

In your theme's CSS, ensure focus states are defined for all interactive elements. Don't override browser defaults without providing alternatives.

Shopify Liquid

Before
button { outline: none; background: none; /* focus invisible */ }
After
button:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

Shopify theme CSS: maintain focus indicators in all button states. Test in both light and dark Shopify preview modes.

Common Mistakes

✗

Using 'outline: none' without providing alternative focus styles

✗

Making focus indicators too subtle or same color as background

✗

Only showing focus on buttons, forgetting links and form inputs

✗

Using focus:outline but testing with mouse (should use :focus-visible for keyboard-only)

✗

Applying focus styles to :hover only, missing :focus

Frequently Asked Questions

What's the difference between :focus and :focus-visible?
:focus triggers for both mouse and keyboard focus. :focus-visible triggers only for keyboard focus (recommended). Use :focus-visible to avoid ugly focus boxes when users click with mouse.
How thick should focus indicators be?
Minimum 2px, ideally 3-4px. Thicker indicators are more visible, especially for users with low vision. Ensure contrast ratio of at least 3:1.
Can I use color alone for focus indicators?
No. Users with color blindness might miss a color-only focus indicator. Combine color with size/shape (outline, border, or background change).
Should focus indicators match brand colors?
Yes, incorporate brand colors if possible, but prioritize visibility and contrast. A visible focus indicator is better than a pretty one that users can't see.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides