Day 5 - Visible Focus, Always

As we mentioned yesterday, when navigating with a keyboard, the focus indicator is essential. It shows where the user is on the page—what link, button, or form field is currently active. Without it, users can get completely disoriented.

The browser’s default focus outline is there for a reason. Don’t remove it unless you’re replacing it with something equally obvious and accessible.

Good Practice

Always ensure the currently focused element is visibly highlighted.
Use :focus-visible to avoid visual clutter for mouse users while keeping focus indicators for keyboard users.
Make sure your custom focus styles meet at least 3:1 contrast with the background (per WCAG 2.4.13).

Example:

:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

Or a background-based focus style:

:focus-visible {
  background-color: #fcd34d; /* Yellow highlight */
  outline: none;
}

Use focus styles that are clearly visible even for users with color blindness or low vision.

Watch Out For

Using outline: none without a replacement.
Overriding focus styles with hover effects that hide them.
Relying on color changes that don’t have enough contrast

Bad Example:

button:focus {
  outline: none; /* No visible focus */
}

If there is nothing to replace the outline, that leaves keyboard users with no visible focus indication.

Pro Tip

Test your focus styles in dark mode, high contrast mode, and with Windows high contrast themes. Some users rely on those settings for accessibility. Also, tools like axe DevTools will alert you to missing or insufficient focus indicators.

Do this today: Use the Tab key to navigate your site. Can you always tell where the focus is? If not, add visible and consistent focus styles using :focus-visible and check contrast.

If you would like to learn more about this: