Removing Outline: Why It Breaks Web Accessibility

When we talk about visual focus in user interfaces, we mean a clear indicator showing users where they are right now. By default, browsers provide this through the outline—usually a blue border around the active element.

Completely Removing Outline: Why It's a Problem

Many developers remove the outline for aesthetic reasons using code like:

*:focus {
  outline: none;
}

On the surface, this seems harmless. In reality, it's a serious violation of accessible design. For many users—especially those who navigate by keyboard alone, or those with low vision—the outline is the only indicator of where they are on the page. Without it, they have no way to know where they are, what they've clicked, or what will happen next.

What Does This Have to Do with Operating Systems?

Many users with visual impairments, degenerative vision conditions, low contrast sensitivity, or color blindness rely on High Contrast Mode in their operating system (for example, in Windows).
When this mode is active:

\r\n
• The operating system overrides some CSS settings like colors, backgrounds, and even some fonts.
\r\n
• However, the outline remains visible and enlarged—often in custom colors (bright yellow or red on a dark background, for example).
  It's one of the few tools the system can preserve when everything else is stripped away—which is why it's critical!
\r\n

When developers remove the outline in CSS, users have no other way to see focus, even if they're using high-contrast mode. In other words: they lose the ability to know what they've clicked on—leading to frustration, confusion, and sometimes they just leave your site.

What About Custom Focus Styles?

That's great—as long as you maintain a clear visual distinction. You can replace the outline with a border, background change, shadow, or other indicator, as long as it's clearly visible in different contrast modes. The rule of thumb:
"If you can't clearly see where you are when pressing TAB, you're breaking accessibility."

In Summary

\r\n
• The outline is the visual traffic light for focus—don't just remove it.
\r\n
• It's respected by operating systems in high-contrast mode—even when other styles are stripped away.
\r\n
• Removing it without a clear alternative violates accessibility standards (WCAG 2.1 Section 2.4.7).
\r\n
• If you do remove it, you must provide an accessible, clear, high-contrast alternative.
\r\n