Enhancing Accessibility: Why Focus Outlines Matter

Intro

You don’t have to disable the “Focus” outlines on your HTML elements. Yes, you heard me right. Your users deserve better and I’ll tell you why 😇.

This is a trap that is so so easy to fall into. I promise you I have done this a lot of times than I’m proud to announce, hahaha.

You’re wrapping up a UI, and making it as sleek and as pixel-perfect as ever, only for you to tab through the page and then you notice those ugly blue outlines appear. By default you just find yourself running to your global CSS file to add this style;

*:focus {
  outline: none;
}

Problem solved? Nahhh, far from it. It isn’t just bad practice when you disable focus outlines. You end up excluding a lot of users from accessing your web app with ease.

In this article, we’ll get to understand why those button outlines matter, what happens when you remove them, and how to improve focus styles the right way.

What Are Focus Outlines and Who Needs Them?

Focus outlines are visual indicators that show which element is currently in focus, typically when navigating a site with a keyboard (tab, shift+tab, etc.).

Usually, browsers show these outlines as dotted or solid blue rings around buttons or links with the main purpose of aiding accessibility (a11y) and showing when a button or link is focused on.

You may not use the tab key to move through a page, but millions of users do, for instance:

• Users with motor impairments who rely on keyboards or assistive switches.

• Users with low vision who use screen magnifiers and need a visible target.

• Power users who navigate faster with keyboard shortcuts.

• Developers testing keyboard accessibility.

When you remove focus outlines, you end up making your site unusable for these users.

The Damage Caused by outline: none and How to Fix

When you hide focus outlines like this:

*:focus {
  outline: none;
}

You end up creating an invisible barrier without knowing it, thus limiting the ability of your users to use your web app. For instance, users try to move through your interface with the tab key but can't see where they are. Imagine trying to fill out a form without knowing which field you are in. That's what the experience feels like when people are using your app.

Worthy to note also is that, taking away focus outlines without adding something else is an accessibility violation under WCAG 2.1. This could affect your users, harm your reputation, or even cause legal issues for your company.

You can also try to press the tab button repeatedly on your app to move through the UI, and confirm if you can see where the focus is.

Instead of taking off the focus ring entirely, or even just leaving the default focus ring, you can make it more elegant and accessible by applying custom styles.

Here’s the right approach:

1. Customize, Do NOT Remove

You can style the focus ring to match your brand without eliminating it:

button:focus {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}

While doing this though, make sure it’s visible against your background and maintains at least a 3:1 contrast ratio.

2. Use :focus-visible for Smarter Styling

Modern browsers support :focus-visible, which is a property that distinguishes between mouse and keyboard focus.

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--outline-color);
}

This means that mouse users won’t see the ring, but keyboard users will still get a clear focus style. It’s the best of both worlds.

PS: Don’t forget to add a fallback for browsers that don’t support :focus-visible. There’s also a polyfill available if needed 🙂.

Why You as a Designer/Developer Should Not Remove It

Most designers and developers remove the default browser outline because it clashes with their custom design systems. But the hard truth is that it’s just a short-term visual fix with long-term usability costs.

On the other hand, a well-designed focus indicator would:

• Reinforce your brand.

• Show attention to accessibility.

• Make your interface more predictable.

While working on your UI, you can cross-check these bullet points to ensure you’re on the right path:

• All interactive elements (buttons, links, form inputs) must show focus.

• The focus indicator must be clearly visible on all backgrounds and themes.

• You may use :focus-visible to conditionally show outlines for keyboard navigation.

• Never hide focus styles globally.

• Test keyboard navigation e2e before tagging any page as completed.

Using Utility Class for Focus Styling

If you use Tailwind or similar utility-first CSS frameworks, you can define a reusable focus class:

.focus-ring {
  outline: 2px solid var(--outline-color);
  outline-offset: 2px;
}

Or with Tailwind directly:

<button class="focus:outline-none focus-visible:outline focus-visible:outline-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2">
  Submit
</button>

In Conclusion

Don’t disable focus outlines just because they don’t match your brand. Create designs around them. Reinvent, customize, but never eliminate them. Always remember that how users use or are able to find their way around your web app is very important.

Focus indicators are lifelines for users who navigate differently from you, and their experience can be made good or bad by even a single line of CSS that you decide to add.

So the next time it crosses your mind to use outline: none, remember that it’s not just about the design. The experience of your users is key to building a great product!

References & Further Reading

• MDN on :focus-visible

• WCAG 2.1 on Focus Visible