SiteLint documentation and guidelines

Avoid using CSS outline attribute because it can hide the focus state of interactive elements

Rule ID: outline-zero

Description

The outline: 0; or outline: none; CSS property is often used to remove the default focus outline from interactive elements such as buttons, links, and form controls. While this can improve aesthetics, it can also severely impact accessibility by removing the visual indication of focus for keyboard users. Properly managing focus visibility is essential to ensuring that users who rely on keyboard navigation can see where they are on the page.

Disabilities impacted

  • Visual impairments: Users who rely on keyboard navigation need visible focus indicators to understand which element is currently active.
  • Motor impairments: Users navigating with keyboards or assistive devices depend on visible outlines to interact effectively.
  • Cognitive disabilities: Clear visual cues help users understand the state of interactive elements.

Why it matters

Removing the focus outline without providing a visible alternative makes navigation difficult or impossible for keyboard users. Visible focus states maintain accessibility and usability for everyone.

Coding problems and solutions

Common coding problems

  • Removing outlines without replacement: Using outline: 0; or outline: none; without a visual alternative.
  • Inconsistent focus styles: Applying custom styles unevenly across elements.
  • Poor visibility: Focus indicators that don’t stand out clearly.

How to fix it

Provide alternative focus indicators

If removing the default outline, include a custom visual indicator.

Incorrect:

button:focus {
  outline: none;
}

Correct:

button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

Ensure consistency across elements

Apply the same visual style across all interactive elements.

Incorrect:

a:focus {
  outline: none;
}
button:focus {
  outline: none;
}
input:focus {
  outline: none;
}

Correct:

a:focus, button:focus, input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}

Use visible and distinct styles

Ensure your styles stand out against the surrounding content.

Incorrect:

button:focus {
  outline: none;
  background-color: #fff;
}

Correct:

button:focus {
  outline: none;
  border: 2px solid #005fcc;
  background-color: #e0f7ff;
}

Known limitations

  • Browser differences: Focus styles may render differently across browsers.
  • High contrast mode: Custom styles must be visible in high contrast settings.
  • Dynamic elements: Ensure newly added elements get appropriate focus styles.

Resources