Component Library
Focus Indicator Visible
Issue Description
Elements lack a visual focus indicator when receiving focus.
Recommendation
A focus indicator should always be visible, and have sufficient contrast. It is best to intentionally style the focus indicator for all links, buttons, fields, etc. reachable by the tab key (mouseless).
- Some browsers (e.g., Chrome, Safari) show an easy-to-see blue outline around the element that currently has focus.
- However, other browsers (e.g., Internet Explorer, Firefox) show a thin dotted line. The latter can be very difficult to see.
- In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus.
We encourage you to change the shape somehow (add a border, box, underline, etc.) as well as choose a color that has sufficient contrast, and test each element with the tab key to make sure a focus indicator is always visible for each focusable element.