Understanding Focus Indicators for Web Accessibility

Focus indicators are one of the most essential, yet often overlooked, aspects of accessible design. When absent or styled invisibly, they make a website nearly impossible to navigate without a mouse. This excludes millions of users with motor disabilities, visual impairments, or temporary injuries who rely on keyboard navigation.

That’s why designers and developers need to master striking a balance between creating visually appealing interfaces and meeting the rigorous standards of the Web Content Accessibility Guidelines (WCAG). Of course, this is challenging, especially when dealing with modern user interfaces (dropdown menus, modals, carousels, or custom widgets) where default browser focus styles often fall short or disappear entirely.

Here, we’ll untangle the practical and technical intricacies of focus indicators – what they are, why they matter, and how to implement them in a way that’s both beautiful and accessible. You’ll learn how to use :focus-visible for smarter styling and meet key WCAG 2.2 requirements!

A focus indicator is a visual highlight that shows you which element on the page is currently active or “in focus”. If you’re using the tab key on your keyboard to navigate from one interactive element to another on a site, you’ve probably seen outlines, borders, or glowing effects around links or buttons. That’s the focus indicator doing its job: showing you where you are in the interface. Just as sighted users would be lost without seeing where the mouse pointer is, keyboard users rely on focus indicators to navigate effectively.

Browser defaults usually handle native elements well, but when you create custom components (such as custom buttons or dropdowns) or override default styles, that’s where things can get messy. We’ll then need to use CSS – there are two pseudo-classes related to focus:

Focus indicators aren’t optional for web accessibility. If your site hides or removes them, it fails WCAG compliance and fails real users.

Now, here’s the part where many well-meaning developers get caught out. To “clean up” a design, it’s common to see :focus {outline: none;} in stylesheets. While it might make the UI look sleeker to a designer, it breaks keyboard navigation for users who need that visual outline. Unless you’re replacing the focus style with something equally or more visible, this snippet is an accessibility anti-pattern and a direct WCAG failure.

When you make your site accessible with focus indicators, you gain:

Every browser has its own idea of what a focus indicator should look like. For example, Chrome and Safari might give you a thin blue glow while Firefox often shows a dotted outline.

It’s common that developers and designers resort to redesigning these default focus styles. The goal is to maintain a polished, cohesive look across platforms that’s also accessible for all users.

That’s especially important when building custom UI elements like dropdowns, sliders, date pickers, or interactive cards. Browsers don’t automatically apply focus styles to those. It’s up to you to make sure they’re focusable and visually indicate that focus. This means managing tabindex, sometimes adding JavaScript for keyboard behaviour, and always making sure your custom element shows some kind of visual focus when users tab to it.

Now let’s talk about how to apply focus indicators correctly – accessible, stylish, and fully WCAG-compliant.

According to SC 2.4.13 Focus Appearance (Level AAA) and SC 2.4.12 Focus Not Obscured (Enhanced) (Level AAA), at a minimum, your focus indicator should:

Here’s a solid baseline example using :focus-visible:

That outline-offset helps the focus ring breathe a bit around the element, making it more noticeable and less cramped.

For more resilient contrast, use a double-outline technique by layering two contrasting colours – typically one light and one dark. As long as the two layers have a contrast ratio of at least 9:1 with each other, at least one will maintain sufficient contrast with any solid background.

Here’s how it looks in CSS:

This combination creates a light inner outline surrounded by a darker outer ring.

Important note: This technique assumes the focus indicator is rendered on top of a single, solid background colour. If your UI includes gradients, images, or overlapping elements, you’ll still need to check the pixels of the indicator against the background colour. Also, avoid using outline-none and relying only on box-shadow. Browsers may suppress shadows in forced-colour modes, so pairing box-shadow with a real outline ensures consistent accessibility.

Focus indicators need to have at least a 3:1 contrast ratio against the background behind the element, and the element itself in its unfocused state.

If your site uses themes, dark mode, gradients, or image backgrounds, test your indicators across all of them. What looks sharp on a white card might disappear entirely on a dark hero banner.

💻 Use tools like the WebAIM Contrast Checker to verify you’re hitting that contrast threshold.

Popups, tooltips, hover cards – any content that appears on top of other UI elements – should never fully cover the focus indicator.

This is a common problem with menus and modals. You tab into a dropdown, and suddenly… where did the focus ring go? If users can’t see where they are, they’re stuck.

To fix this, make sure your styles are layered thoughtfully with z-index, and test your focus indicators across all components.

If your focus indicator uses animation or blinking, it must not flash more than three times in a second, especially if it’s red. This is a WCAG 2.3.1 requirement to prevent seizures or motion sensitivity issues.

Let’s move from theory to practice. What does a great focus indicator actually look like in the wild?

If you head over to The A11Y Collective’s homepage and start pressing the Tab key, you’ll see a textbook example of accessible focus design in action. 

Each interactive element clearly shows when it’s in focus – no mystery, no guesswork, no lost-in-the-interface moments.

Let’s break down what works and how you can apply it to your own site:

Here’s your go-to list of best practices to make sure your indicators are visible, reliable, accessible, and effective across your entire interface:

Focus indicators may seem like a small part of the accessibility puzzle, but as you’ve seen, they’re a big deal. They’re what make interfaces usable for people who navigate with a keyboard, assistive tech, or under conditions where a mouse just isn’t an option.

But here’s the thing: focus indicators don’t work alone. They rely on solid semantic markup, logical tab order, proper ARIA use, and good visual contrast. And when all these crucial accessibility elements come together, you get a user experience that’s not just technically compliant, but genuinely inclusive.

That’s exactly what we teach at The A11Y Collective! Our “Accessible design, the basics” course is made for designers and developers who want to build interfaces that don’t leave anyone behind. We’ll walk you through practical ways to implement the WCAG guidelines – like the ones we explored in this article – and turn them into everyday design practices.

Ready to take your accessibility skills to the next level? Sign up for our “Accessible design, the basics” course and start designing with everyone in mind!