SiteLint documentation and guidelines

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 with visual impairments who rely on keyboard navigation need visible focus indicators to understand which element is currently active.
  • Motor impairments: users with motor impairments who navigate using keyboards or assistive devices depend on focus outlines to interact effectively with web content.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear visual cues indicating focus, helping them understand the interactive elements’ state.

Why it matters

Removing the focus outline without providing an alternative visual cue can make navigation difficult or impossible for users who rely on keyboard interaction. Ensuring visible focus states maintains accessibility and usability, allowing all users to interact with the content effectively.

Coding problems and solutions

Common coding problems

  • Removing focus outlines without replacement: using outline: 0; or outline: none; without providing an alternative visual focus indicator.
  • Inconsistent focus styles: applying custom focus styles inconsistently across different interactive elements.
  • Poorly visible custom focus styles: using custom focus styles that are not sufficiently visible or distinct from the rest of the content.

How to fix it

Provide alternative focus indicators

If removing the default focus outline, ensure an alternative visual indicator is provided.

Incorrect example
button:focus {
    outline: none;
}
Correct example

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

Ensure consistent focus styles

Apply consistent focus styles across all interactive elements to maintain predictability.

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

Use visible and distinct focus styles

Ensure custom focus styles are clearly visible and distinguishable from the rest of the content.

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

Known limitations

  • Browser compatibility: different browsers may render focus styles differently. Thorough testing across multiple browsers and devices is recommended.
  • High contrast mode: ensure that custom focus styles are visible in high contrast mode for users with visual impairments.
  • Dynamic content: for dynamically added elements, ensure that focus styles are applied correctly and are visible when elements receive focus.

Resources