CSS: Handling Focus Properly for Accessibility

When refining a web interface's design, it can be tempting to remove the default focus styles. However, this small visual cue plays a key role in accessibility. We'll explore why the outline is often removed, how this can create issues for keyboard users, and how to use :focus-visible smartly to combine aesthetics and accessibility.

1. Why Do Developers Remove the outline on :focus?

When an HTML element receives focus (such as a link or a form field), browsers display a default outline (often blue) around the element. This outline is extremely helpful for keyboard users, as it shows them where the current focus is.

However, this default style is often considered unattractive. Many developers remove it using a rule like this:

:focus {
    outline: none;
}

This creates a cleaner visual appearance or a better-integrated design, especially after a mouse click. But it introduces a major accessibility issue…

2. Why This Is a Problem, and How to Do It Right

Removing the outline without providing an alternative makes keyboard navigation extremely difficult—or even impossible. Users can no longer tell where they are in the interface, which severely impacts accessibility.

To resolve this conflict between design and accessibility, you can use the :focus-visible pseudo-class. It targets only situations where focus styles are truly needed, such as when using a keyboard or assistive technologies. Here’s a more inclusive approach:

/**
 * Removes default focus outline on all elements.
 */

:focus {
    outline: none;
}

/**
 * Displays a visible focus outline only for keyboard and assistive technology users.
 * Improves accessibility without affecting mouse/touch interactions.
 */
 
:focus-visible {
    outline: 2px solid #0e93f0;
    outline-offset: 2px;
}

✅ What It Changes:

• The outline is removed for mouse clicks, avoiding an often unwanted visual effect.
• The outline remains visible for keyboard users, ensuring accessible navigation.
• The style can be customized (color, thickness, offset) to perfectly match the design.

🧠 Key Takeaway:

Never completely remove focus styles without providing an alternative. With :focus-visible, you can combine aesthetics and accessibility without compromise.