Accessibility 101: Focus Indicators

•5 min read

What are Focus Indicators?

Focus indicators are visual markers that show which interactive element on a webpage currently has keyboard focus. They help users, especially those who navigate with a keyboard or assistive technology, understand where they are on a page and what element they can interact with.

Why are Focus Indicators Important?

Focus indicators are essential for web accessibility because they:

  • Guide keyboard users through interactive elements
  • Help users with motor impairments navigate your site
  • Provide visual feedback for all users
  • Are required for WCAG 2.2 compliance (Success Criterion 2.4.7)

Default Focus Indicators

Browsers provide default focus indicators, typically shown as an outline:

/* Default browser focus styles */
:focus {
    outline: 2px solid #000;
    outline-offset: 2px;
}

Custom Focus Indicators

You can style focus indicators to match your design while maintaining visibility:

/* Custom focus styles */
.button:focus {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.4);
}

Best Practices for Focus Indicators

1. Never Remove Focus Outlines

Avoid removing focus indicators without providing an alternative:

/* Bad - Don't do this */
:focus {
    outline: none;
}

/* Good - Provide an alternative if removing outline */
:focus {
    outline: none;
    box-shadow: 0 0 0 3px #0066CC;
}

2. Ensure Sufficient Contrast

Focus indicators must have sufficient contrast against adjacent colors, this should be a minimum of 3:1:

/* Example with high contrast focus ring */
.interactive-element:focus {
    outline: 3px solid #0066CC; /* Ensure this color has 3:1 contrast */
    outline-offset: 2px;
    /* Add background change for additional visibility */
    background-color: #E6F0FF;
}

3. Make Focus Indicators Large Enough

Ensure focus indicators are easily visible, this should be a minimum of 2px:

/* Recommended minimum size */
.button:focus {
    outline: 3px solid #0066CC; /* At least 2px, preferably 3px */
    outline-offset: 2px; /* Creates space between element and outline */
}

4. Handle Different Input Methods

Use :focus-visible for keyboard-only focus styles:

/* Modern focus handling */
.button:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

/* Support for older browsers */
.button:focus {
    outline: 3px solid #0066CC;
}

/* Remove focus styles for mouse users in modern browsers */
.button:focus:not(:focus-visible) {
    outline: none;
}

Common Mistakes to Avoid

  1. Removing focus indicators without alternatives
  2. Using low-contrast focus styles
  3. Making focus indicators too thin or small
  4. Relying solely on color changes
  5. Not testing with keyboard navigation

Testing Focus Indicators

You can test your focus indicators by:

  • Using Tab key to navigate through the page
  • Checking contrast ratios of focus indicators
  • Testing with different browsers
  • Verifying visibility against different backgrounds
  • Using automated accessibility tools

Focus Order Example

Ensure a logical focus order for your interactive elements:

<header>
    <nav>
        <a href="/" class="logo">Home</a>
        <button class="menu-toggle">Menu</button>
    </nav>
</header>

<main>
    <h1>Welcome</h1>
    <button class="primary-cta">Get Started</button>
    <a href="/learn-more" class="secondary-link">Learn More</a>
</main>

Remember

  • Never remove focus indicators completely
  • Ensure high contrast against all backgrounds
  • Make indicators sufficiently large
  • Test with keyboard navigation
  • Consider different types of input methods

Additional Resources