Focus indicators in navigation: what keyboard users need to see

A user tabs through your navigation menu. They press Tab. The browser moves focus to the next link. But they can’t tell where they are. The focus indicator is a 1-pixel gray outline on a white background—invisible unless you squint. They press Tab again. Still nothing visible. They give up and leave.

You just lost a customer who was actively trying to use your site.

Focus indicators are the most underestimated part of keyboard navigation. Most designers treat them as an afterthought or actively suppress them because they “look ugly.” But for keyboard users—whether they’re blind, motor-impaired, or just efficient power users—focus indicators are the cursor. Without them, navigation is impossible.

The good news: designing effective focus indicators isn’t hard. The bad news: most e-commerce sites get it wrong, and WCAG 2.2 raised the bar even higher.

What WCAG 2.2 Actually Requires

WCAG 2.2, published in October 2023, introduced a new Level AA criterion specifically for focus indicators: Success Criterion 2.4.11 Focus Appearance.

Previous guidelines (WCAG 2.1’s 2.4.7 Focus Visible) only required that focus be visible—any visible indicator passed. But “visible” is subjective. A 1-pixel light gray outline on white technically counts as visible, even though it’s functionally useless.

WCAG 2.2 sets specific requirements:

Size Requirement

The focus indicator must be at least 2 CSS pixels thick for the full perimeter of the focused component, or have an equivalent area.

What this means in practice:

• A solid 2px outline around a button: passes
• A 1px outline: fails (unless it covers a larger area)
• A 4px outline on one side only: fails (doesn’t cover the perimeter)
• A thick underline below a link that’s 2px tall and at least as wide as the link text: passes

Contrast Requirement

The focus indicator must have a contrast ratio of at least 3:1 against:

1. The unfocused state of the component
2. Adjacent colors (background behind the component)

This is harder than it sounds. If your navigation link is dark blue text on a white background, and your focus indicator is a light blue outline, you need:

• 3:1 contrast between the light blue outline and the white background (adjacent color)
• 3:1 contrast between the light blue outline and the dark blue text (component color)

Many designers pick a brand color for focus that looks great but fails one of these contrast checks.

The Default Browser Outline Problem

Most browsers provide a default focus outline—usually a thin dotted or solid line. Chrome uses a 2px blue outline. Firefox uses a dotted outline. Safari uses a blue glow.

These defaults fail WCAG 2.2 in many contexts:

Research by WebAIM found that default focus styles fail contrast requirements on approximately 78% of color combinations used in real websites.

That’s why custom focus indicators matter. You can’t rely on browser defaults.

What Good Focus Indicators Look Like

The best focus indicators balance visibility, brand consistency, and accessibility. Here are proven patterns from top e-commerce sites.

Pattern 1: High-Contrast Outline

The most common pattern is a solid outline with strong contrast:

a:focus,
button:focus {
  outline: 3px solid #0066CC; /* Blue with high contrast */
  outline-offset: 2px;        /* Space between element and outline */
}

This works well for navigation links, buttons, and form inputs. The 2px offset prevents the outline from overlapping text or icon edges, improving readability.

Real example: Amazon uses a 3px orange outline (#FF9900) with 2px offset on all interactive elements. The orange passes contrast on white backgrounds (6.8:1) and against their dark blue buttons (4.2:1).

Pattern 2: Background + Outline Combo

For tighter visual integration, combine a background color change with a thin outline:

a:focus,
button:focus {
  background-color: #E6F2FF; /* Light blue background */
  outline: 2px solid #0066CC; /* Darker blue outline */
  outline-offset: 0;
}

This is especially effective for navigation menus where you want the focused link to stand out from the rest of the menu.

Real example: Google’s top navigation uses a light gray background (#F1F3F4) with a 2px black outline on focused items. The background creates a clear “selected” state, while the outline provides the required contrast.

Pattern 3: Underline for Text Links

For inline text links within content, a thick underline is often clearer than an outline:

a:focus {
  outline: none; /* Remove default outline */
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #0066CC;
  text-underline-offset: 4px;
}

This keeps the focus indicator close to the text and avoids the “box around a word” look that outlines create.

Real example: Shopify’s documentation uses a 3px blue underline on focused links, positioned 4px below the text baseline.

Pattern 4: Shadow for Interactive Cards

For card-based layouts (product cards, feature boxes), a box shadow creates depth:

.product-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0066CC, 0 4px 12px rgba(0,0,0,0.15);
}

The first shadow layer (0px blur, 3px spread) acts as the focus indicator. The second adds visual depth.

Real example: Etsy uses a 3px blue shadow around product cards when focused, combined with a subtle drop shadow for depth.

The :focus-visible Trick

One common designer complaint about focus indicators is that they appear when users click with a mouse, creating a “stuck” outline after the click. This happens because :focus triggers on any focus event—mouse, keyboard, or programmatic.

The solution is the :focus-visible pseudo-class, supported in all modern browsers since 2022:

/* Show focus indicator only for keyboard users */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #0066CC;
  outline-offset: 2px;
}

/* Hide default outline for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

This shows the focus indicator when users navigate with Tab, but hides it when they click with a mouse. Best of both worlds.

Important caveat: Some users with motor disabilities use both keyboard and mouse—they may click to focus an element, then use keyboard to interact. Don’t assume :focus-visible means “screen reader user only.” It means “keyboard navigation in progress.”

Testing Your Focus Indicators

Here’s how to test whether your focus indicators meet WCAG 2.2:

Step 1: Manual Keyboard Test

Open your site and press Tab repeatedly. Ask yourself:

• Can I always see where focus is?
• Is the focus indicator at least 2px thick?
• Does it look different from the unfocused state?
• Can I see it on light backgrounds? Dark backgrounds?
• Does it disappear or become hard to see on hover?

If you answer “no” to any of these, you have a focus indicator problem.

Step 2: Contrast Ratio Check

Use a tool like WebAIM’s Contrast Checker to verify:

1. Focus indicator vs. background: Measure the contrast between your focus outline color and the background behind the element. Must be at least 3:1.

2. Focus indicator vs. component: Measure the contrast between your focus outline color and the component’s main color (text color for links, background color for buttons). Must be at least 3:1.

If your focus indicator is #0066CC (a common blue), check it against:

• White background: 8.1:1 (passes)
• Light gray background (#F5F5F5): 7.2:1 (passes)
• Light blue background (#CCE5FF): 2.2:1 (fails)

When it fails, you need a darker or lighter focus color depending on context.

Step 3: Automated Audit

Run these tools to catch common focus indicator issues:

• axe DevTools (browser extension): Flags missing focus indicators and low-contrast outlines
• Lighthouse Accessibility (in Chrome DevTools): Checks for focusable elements without visible focus styles
• WAVE (web accessibility evaluation tool): Highlights focus order and focus visibility issues

None of these tools perfectly enforce WCAG 2.2’s size and contrast requirements yet (the standard is new), but they catch obvious problems.

Common Focus Indicator Mistakes

These are the failures I see most often on Shopify stores:

Mistake 1: Suppressing Focus Entirely

Many themes include this CSS:

*:focus {
  outline: none;
}

This removes all focus indicators site-wide. It’s the single worst accessibility mistake you can make.

Why it happens: Designers don’t like the default browser outline and remove it without replacing it.

Fix: Remove that rule and add custom focus styles using :focus-visible.

Mistake 2: Invisible Outlines on Dark Backgrounds

A light blue focus outline looks great on white backgrounds but disappears on dark navigation bars or footer sections.

Example failure:

a:focus {
  outline: 2px solid #66A3E0; /* Light blue */
}

On a dark blue background (#1A2332), this outline has only 1.8:1 contrast—fails WCAG.

Fix: Use different focus colors for light and dark contexts:

/* Light background */
.light-section a:focus {
  outline: 3px solid #0066CC; /* Dark blue */
}

/* Dark background */
.dark-section a:focus {
  outline: 3px solid #FFFFFF; /* White */
}

Or use a high-contrast color that works everywhere, like black on light backgrounds and white on dark.

Mistake 3: Focus Indicators Smaller Than 2px

Thin outlines fail WCAG 2.2’s size requirement:

button:focus {
  outline: 1px solid #0066CC; /* Too thin */
}

Fix: Increase to at least 2px, or use a thicker outline on one side:

button:focus {
  outline: none;
  border-bottom: 4px solid #0066CC; /* Thick underline */
}

Mistake 4: Relying on Color Change Alone

Changing only the text color or background color on focus fails if the change doesn’t create a clear visual indicator:

a:focus {
  color: #0066CC; /* Text turns blue */
}

This might be visible to sighted users, but screen reader users get no indication that focus has moved. And if the original text color was already similar to blue, the change might be too subtle.

Fix: Always add a perimeter indicator (outline, underline, or border).

Focus Indicators for Mega Menus

Mega menus pose a unique challenge because they contain multiple levels of navigation. When a user tabs into a mega menu, where should focus go? When they arrow down through submenus, how do you show which item is focused?

Here’s a robust pattern:

/* Top-level navigation item */
.nav-item > a:focus {
  outline: 3px solid #0066CC;
  outline-offset: -3px; /* Inside the element */
  background-color: #F0F7FF;
}

/* Submenu items */
.mega-menu a:focus {
  background-color: #E6F2FF;
  outline: 2px solid #0066CC;
}

Key details:

• Top-level items use outline-offset: -3px to draw the outline inside the element boundary, avoiding overlap with adjacent items
• Submenu items get both a background color (to stand out from the grid) and an outline (to meet WCAG size requirement)

Real example: Navi+ Menu Builder generates mega menus with this pattern built in—top-level items highlight with a background color and outline, and submenus use arrow key navigation with clear focus indicators on each item.

The Business Case for Better Focus Indicators

Most store owners don’t prioritize focus indicators because they seem like a minor visual detail. But the impact is measurable.

WebAIM’s 2024 survey of screen reader users found that 87% of respondents cited “keyboard navigation” as the most important accessibility feature, ahead of alt text, semantic HTML, and ARIA labels. Within keyboard navigation, visible focus indicators ranked as the top frustration.

When users can’t see where they are on the page, they can’t complete tasks. That translates directly to lost revenue.

Research by the Baymard Institute on checkout usability shows that “too long/complicated checkout” causes 17% of cart abandonment. For keyboard users on a site with poor focus indicators, every checkout is too complicated—they spend extra time reorienting on each field, or they abandon entirely.

Conversely, sites with strong focus indicators see improved task completion rates. A study by Nomensa on accessibility ROI found that accessible sites (including good focus management) had 23% higher task completion rates than inaccessible competitors.

Better focus indicators won’t just help you pass audits. They’ll help users finish shopping.

Quick Implementation Checklist

Here’s a 20-minute action plan for improving your focus indicators:

Immediate (5 minutes):

1. Add this base CSS to your theme:

   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   select:focus-visible {
     outline: 3px solid #0066CC;
     outline-offset: 2px;
   }
   

2. Test on your homepage, navigation menu, and checkout. Do you see the focus indicator everywhere?

This week (1 hour):

1. Choose a brand-appropriate focus color that passes contrast requirements. Use WebAIM’s Contrast Checker to verify 3:1 against your main background colors.

2. Customize focus styles for different sections (light backgrounds vs. dark backgrounds).

3. Test your mega menu (if you have one). Make sure focused submenu items are clearly visible.

This month (2-3 hours):

1. Add specific focus styles for interactive components:
   • Product cards
   • Add-to-cart buttons
   • Filter checkboxes
   • Search autocomplete suggestions
   • Modal close buttons

2. Run an automated audit with axe DevTools and fix any flagged focus issues.

3. Have a team member (or customer) navigate your site with keyboard only and report where focus is hard to see.

Focus indicators are one of the easiest accessibility wins. The technical work is minimal—a few dozen lines of CSS—but the impact is huge. Every keyboard user who lands on your site will benefit.

This article is part of the larger guide on Keyboard navigation: why it matters beyond accessibility.