Focus Indicators — WCAG 2.4.7 Complete Guide for Web Developers 2026

If you've ever tabbed through a website and had no idea where you were on the page, you've experienced a website with missing focus indicators. This is one of the most common — and most frustrating — accessibility issues for keyboard users. It's also a frequent violation cited in ADA lawsuits.

This comprehensive guide covers everything you need to know about focus indicators — from why they matter and WCAG 2.4.7 requirements to how to implement them and common mistakes to avoid.

What are Focus Indicators?

A focus indicator is a visual cue that shows which element on the page currently has keyboard focus. It tells keyboard users exactly where they are on the page — just like a mouse cursor tells mouse users where they're pointing.

Focus indicators can be:

• Outlines — A colored border around the focused element
• Background changes — A different background color when focused
• Underlines — An underline beneath focused text
• Highlights — A glow or shadow effect
• Any combination — Multiple visual changes together

Without focus indicators, keyboard users are effectively blind — they have no idea where they are on the page or what they're about to activate.

WCAG 2.4.7 — Focus Visible (Level AA)

WCAG 2.4.7 (Focus Visible) requires that:

"Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."

— WCAG 2.1, Success Criterion 2.4.7 (Level AA)

In plain English: when a user tabs to an element, they must be able to see which element has focus.

This is a Level AA requirement, which means it's required by ADA, EAA, Section 508, and most accessibility laws.

Common Focus Indicator Mistakes

1. Removing the Default Outline

The Mistake: outline: none; without a visible replacement.

Why It's Wrong: The default outline is the only focus indicator users get. Removing it without a replacement makes navigation impossible for keyboard users.

The Fix: Never remove outline without adding a visible alternative.

2. Low-Contrast Focus Indicators

The Mistake: A focus indicator that's too subtle or low-contrast to see.

Why It's Wrong: Users with low vision can't see subtle focus indicators.

The Fix: Use high-contrast colors that are clearly visible against the background.

3. Focus Indicators Only on Hover

The Mistake: Focus indicators that only appear on hover, not on keyboard focus.

Why It's Wrong: Keyboard users never hover — they only focus.

The Fix: Use :focus or :focus-visible, not just :hover.

4. Inconsistent Focus Indicators

The Mistake: Some elements have focus indicators, others don't.

Why It's Wrong: Users can't predict when they'll see a focus indicator.

The Fix: Apply consistent focus styles to ALL interactive elements.

How to Implement Focus Indicators

1. Use the :focus Pseudo-Class

The simplest way to add focus indicators is using the :focus pseudo-class:

/* Add visible focus indicator to all interactive elements */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* You can also use outline-style: auto for browser defaults */
a:focus, button:focus {
    outline: 2px solid #3b82f6;
}

2. Use :focus-visible for Better UX

The :focus-visible pseudo-class shows focus indicators only when the user is navigating with a keyboard — not when using a mouse:

/* Show focus only for keyboard users */
:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Never remove focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

3. Add Focus Indicators to All Interactive Elements

Apply focus indicators to all interactive elements:

/* All interactive elements */
a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]) {
    transition: outline 0.15s ease;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

4. Make Focus Indicators High-Contrast

Ensure focus indicators are clearly visible:

/* High-contrast focus indicator */
a:focus-visible, button:focus-visible {
    outline: 3px solid #2563eb; /* Darker blue */
    outline-offset: 2px;
    background-color: rgba(37, 99, 235, 0.1);
}

/* Alternative: Double outline for extra visibility */
a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #2563eb;
}

Focus Indicator Best Practices

1. Make Focus Indicators Prominent

Focus indicators should be clearly visible and high-contrast. A 1px light gray outline on a white background is invisible — use 2-3px of a high-contrast color.

2. Maintain Consistent Styling

All interactive elements should have the same focus indicator style. Users should know exactly what to expect when they tab through your website.

3. Don't Rely on Color Alone

Like all accessibility features, focus indicators shouldn't rely solely on color. Use outline, underline, or background changes — not just a color change.

4. Test with Keyboard Only

The best way to test focus indicators is to put away your mouse and navigate your website using only the Tab key. If you can't always see where you are, your focus indicators need improvement.

5. Consider Mobile and Touch Devices

Focus indicators should work on all devices, including mobile and touch screens. Test your focus indicators on different screen sizes and devices.

Focus Indicator Examples

Example 1: Basic Outline

a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

Example 2: Double Outline (Most Visible)

a:focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 4px #3b82f6; }

Example 3: Background + Outline

a:focus-visible { outline: 3px solid #3b82f6; background: rgba(59,130,246,0.1); }

Focus Indicator Checklist

Frequently Asked Questions — Focus Indicators

Internal Links — Keyboard Accessibility Resources