Focus Indicators in Web Design: Why They Matter and How to Do Them Right

There is a good chance your website is broken for keyboard users. Not broken in an obvious, page-will-not-load way, broken in a subtle, invisible way that makes navigation frustrating or impossible for a significant portion of your audience.

The culprit is almost always focus indicators. Either they have been removed entirely, styled so subtly they are invisible, or never given a moment’s thought during the design process. This article explains what focus indicators are, why they are non-negotiable for accessibility, and how to implement them well without compromising your visual design.

What Focus Indicators Are

When you click a link or button with your mouse, you can see exactly where your cursor is pointing. But when you navigate a website using a keyboard, pressing Tab to move between interactive elements, you need a different kind of visual cue to tell you where you are on the page. That cue is a focus indicator.

By default, browsers apply a visible outline to the element that currently has keyboard focus. In Chrome, this is typically a blue outline. In Firefox, it is a dotted outline. In Safari, it is a blue glow. These default indicators exist because without them, keyboard navigation is like using a mouse with an invisible cursor.

Every interactive element on your page, links, buttons, form inputs, dropdowns, checkboxes, custom widgets, should have a visible focus indicator. When a user presses Tab and lands on your “Contact Us” button, they need to see clearly that the button is now active and ready to be triggered with the Enter or Space key.

Who Relies on Focus Indicators

The obvious answer is people who use keyboards to navigate, but that group is larger and more varied than most people assume.

People with motor disabilities who cannot use a mouse or trackpad. They might use a keyboard, a switch device, or voice control software, all of which depend on focus management to work.

People with low vision who use screen magnifiers. When you are viewing a page at 400 percent zoom, you can only see a small portion of the screen at once. Focus indicators help orient you within that narrow viewport.

Screen reader users benefit from focus indicators when they also have some usable vision. The screen reader announces elements audibly, and the focus indicator confirms the position visually.

Power users who prefer keyboard shortcuts. Developers, writers, data entry professionals, and anyone who works faster with a keyboard than a mouse. These people might not have any disability at all, they simply work more efficiently with the keyboard.

People with temporary impairments, a broken wrist, a lost mouse, a touchpad that has stopped working. Keyboard navigation becomes essential in these moments, and focus indicators make it usable.

The Web Accessibility Initiative estimates that around 15 percent of the global population has some form of disability. Even if you only consider permanent motor disabilities and regular keyboard-preference users, you are looking at a meaningful portion of your audience. Removing focus indicators locks these people out.

The WCAG Requirements

The Web Content Accessibility Guidelines (WCAG), published by the W3C, are the internationally recognised standard for web accessibility. They are also the basis for most accessibility legislation, including the UK’s Equality Act 2010 and the European Accessibility Act.

WCAG has specific requirements for focus indicators.

WCAG 2.1 Level AA, Success Criterion 2.4.7: Focus Visible states that any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible. This is the baseline. If your site aims for Level AA compliance (which most legal frameworks expect), focus indicators must be present and visible.

WCAG 2.2 Level AA, Success Criterion 2.4.11: Focus Not Obscured (Minimum) adds that the focused component is not entirely hidden by author-created content. Sticky headers, modal overlays, and cookie banners are common offenders here, they can cover the focused element completely, leaving keyboard users stranded.

WCAG 2.2 Level AAA, Success Criterion 2.4.13: Focus Appearance goes further, specifying minimum size and contrast requirements for the focus indicator itself. While AAA is not typically a legal requirement, it represents best practice.

The minimum contrast ratio for a focus indicator against its adjacent colours should be at least 3:1. The indicator should have an area of at least the equivalent of a 2px solid outline around the element. These are not arbitrary numbers, they ensure the indicator is actually perceivable.

The Problem With outline: none

At some point in the late 2000s, a practice spread through the web design community that still causes damage today: adding outline: none to reset stylesheets or applying it globally to remove browser default focus outlines.

The logic was understandable but wrong. Designers saw the browser’s default outline appearing on buttons and links when clicked with a mouse and considered it ugly. Rather than addressing the specific scenario (mouse clicks), they nuked the outline entirely, removing it for keyboard users too.

This single line of CSS has probably caused more accessibility damage than any other:

/* Do not do this */
*:focus {
  outline: none;
}

If this exists in your codebase, remove it. If your CSS reset or framework includes it, override it. There is no situation where globally removing focus outlines is acceptable.

Some popular CSS resets and frameworks included outline: none or outline: 0 for years. Normalize.css, various Bootstrap versions, and countless starter templates shipped with this pattern. Even if you did not add it yourself, it might be in your project.

The Modern Solution: focus-visible

The reason designers wanted to remove outlines was not entirely unreasonable, showing a thick blue ring around a button when someone clicks it with a mouse is arguably unnecessary and can look jarring. The problem was that the tools to handle this properly did not exist yet.

They do now. The :focus-visible pseudo-class, supported in all modern browsers, applies styles only when the browser determines that focus should be visually indicated. In practice, this means:

• Keyboard navigation (Tab, Shift+Tab): focus-visible applies. The user sees the indicator.
• Mouse clicks: focus-visible typically does not apply. The user does not see the indicator.
• Touch taps: focus-visible typically does not apply.

This gives you the best of both worlds. Keyboard users get clear focus indicators. Mouse and touch users do not see outlines they do not need.

Here is the pattern:

/* Remove the default outline for mouse/touch users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Style the focus indicator for keyboard users */
:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

The first rule removes the outline when focus is present but focus-visible is not, meaning the user is likely using a mouse. The second rule applies your custom outline when focus-visible is active, meaning the user is likely using a keyboard.

An even simpler approach, if you are comfortable relying on browser heuristics entirely:

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

Modern browsers only show the default outline on :focus-visible by default, so you may not need the :focus:not(:focus-visible) rule at all. Test in your target browsers to confirm.

Best Practices for Styling Focus Indicators

A focus indicator should be impossible to miss but should not break your design. Here are the principles.

Use Sufficient Contrast

The indicator must have at least a 3:1 contrast ratio against the background it sits on. A thin light-grey outline on a white background is invisible and useless. A solid blue or dark outline on a light background is clear and effective.

Be careful with indicators that only work on one background colour. If your outline is white, it will be invisible on a white section of your page. Consider using a two-tone approach, a dark outline with a light outer shadow, or vice versa, so the indicator is visible against any background.

:focus-visible {
  outline: 3px solid #0f172a;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);
}

This creates a dark outline surrounded by a light glow, ensuring visibility on both light and dark backgrounds.

Use Adequate Size

A 1px outline is hard to see, especially for users with low vision. Use at least 2px, ideally 3px. The outline-offset property adds space between the element and the outline, making it more prominent and preventing it from being obscured by the element’s own border.

Do Not Rely on Colour Alone

Some sites change the background colour or text colour of focused elements instead of using an outline. This can work as an additional indicator, but should not be the only one. Colour-blind users may not perceive the change. An outline or border change is a shape-based indicator that works regardless of colour perception.

Be Consistent

Use the same focus indicator style across your entire site. If buttons get a blue outline, links should too. Consistency helps keyboard users build a mental model of how your interface works. Changing the focus style between sections or components creates confusion.

Do Not Animate Focus Indicators

It might be tempting to add a fade-in or pulse animation to your focus indicator. Resist this. Focus indicators need to appear instantly. A 300ms fade-in means a keyboard user pressing Tab rapidly will not see the indicator on elements they pass through quickly, and the indicator they need may still be fading in when they have already moved on. Keep transitions at 0ms or avoid them entirely for focus states.

Handle Dark and Light Themes

If your site supports a dark mode, ensure your focus indicator works in both themes. A dark outline that is perfect on a white background disappears on a dark one. Use CSS custom properties to adapt:

:root {
  --focus-colour: #0f172a;
  --focus-glow: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus-colour: #e2e8f0;
    --focus-glow: rgba(0, 0, 0, 0.6);
  }
}

:focus-visible {
  outline: 3px solid var(--focus-colour);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-glow);
}

Examples of Good Implementations

GOV.UK uses a thick yellow background highlight with a dark bottom border on focused links. It is unmistakable, high-contrast, and consistent across the entire service. It is arguably the gold standard for focus indicator design.

GitHub uses a blue outline with a white inner shadow, ensuring the indicator is visible against both their light and dark themes. It is clean, clear, and does not clash with the interface.

BBC applies a clear, high-contrast outline on interactive elements that is visible across their varied colour schemes and content types. For a site with as much visual variety as the BBC, maintaining consistent focus indicators is a significant design achievement.

What these implementations share is a commitment to clarity over subtlety. The focus indicator is not apologetically thin or colour-matched to blend in, it is deliberately prominent because that is the entire point.

Common Mistakes to Avoid

Using the same style for :hover and :focus. Hover and focus are different states serving different purposes. A user might hover over an element without focusing it, or focus an element without hovering. Make them visually distinct so keyboard users can distinguish between “I am near this element” and “I have selected this element.”

Hiding focus indicators on certain components. Every interactive element needs a focus indicator, not just the ones you think keyboard users will target. Navigation links, footer links, social media icons, card links, form labels that control inputs, all of them.

Breaking focus order with tabindex. Avoid using positive tabindex values (e.g., tabindex="3"). They override the natural document order and create a confusing, unpredictable navigation sequence. Use tabindex="0" to add elements to the natural tab order, and tabindex="-1" to make elements programmatically focusable but not in the tab sequence.

Forgetting focus trapping in modals. When a modal or dialogue opens, keyboard focus should be trapped inside it. Pressing Tab should cycle through the modal’s interactive elements, not disappear behind it into the main page. When the modal closes, focus should return to the element that triggered it.

Testing Focus Indicators

Testing is straightforward. Put your mouse aside and press Tab. Navigate your entire site using only the keyboard. At every point, ask yourself:

1. Can I see where focus currently is?
2. Is the indicator clear against its background?
3. Does focus move in a logical order?
4. Can I access every interactive element?
5. Can I operate every control (open dropdowns, submit forms, close modals)?

Use browser extensions to support your manual testing. The axe DevTools extension (free) catches missing focus indicators and other accessibility issues. WAVE provides a visual overlay of accessibility errors. Accessibility Insights for Web (from Microsoft) has a Tab Stops feature that visually traces the tab order across your page.

Automated testing catches some focus indicator issues but not all. A tool can detect outline: none in your CSS. It cannot judge whether your custom focus indicator is actually visible against the background of a particular section. Manual keyboard testing remains essential.

Making It Part of Your Process

Focus indicators should be designed alongside your other component states, default, hover, active, disabled, and focused. Treat them as a core part of your design system rather than an afterthought bolted on during an accessibility audit.

Define your focus indicator style once, apply it globally, and check it works against every background colour in your palette. Add keyboard testing to your QA process. When designers hand off a new component, the focus state should be specified. When developers build it, they should verify it with the keyboard before marking it complete.

This is not extra work. It is the same discipline applied to hover states, which nobody questions. The difference is that hover states serve a nice-to-have purpose while focus indicators serve a must-have one.

Your Next Step

Open your website right now and press Tab five times. If you cannot see where focus is, or if focus disappears behind a sticky header, or if the indicator is so faint you have to squint, your site has a problem that is affecting real users today.

If you need help getting your focus indicators right, or if a wider accessibility audit reveals deeper issues, Fourseven Media can help. We build accessible websites from the start and remediate existing sites that have fallen short.

Get in touch and let’s make your site work for everyone.