Do not override the browser’s default focus indicator
Introduction
Focus indicators are visual cues that highlight the currently focused element on a webpage, guiding users who navigate with keyboards or assistive technologies. By default, browsers provide built-in focus indicators that are already accessible when left unmodified. Overriding these indicator styles can negatively impact accessibility and usability if not styled correctly.
Decision
Other than applying outline-offset styles, do not style default focus indicators.
Context
We have opted not to customize default focus states at this time because ensuring consistent focus styles for every link and interactive element would require significant effort. Factors such as light, dark, high-contrast modes, etc., and other accessibility considerations would all need to be addressed and thoroughly tested.
Consequences
- Different browsers handle focus states in various ways, so the quality of focus indicators can vary. Safari, in particular, is known for having less effective focus indicators compared to other browsers.
- Default focus styles may not match your theme.
Exceptions
-
Adding
outline-offsetstyles to improve legibility of the focus outline. Small adjustments like outline-offset can enhance aesthetics without sacrificing functionality. - If a third-party plugin or module has removed default focus styles for its components, you should re-add them.