Keeping Focus
Published on
Ever tab through a website and notice a little outline appearing around the links, buttons, or forms? If so, you have encountered the :focus pseudo-class!
Focus indicators
Focus indicators let users know what element on the page has focus. Screen reader users, assistive technology users, and power users all benefit from these outlines.
Have you ever tabbed through an online form while entering your mailing address? If so, a focus indicator appeared in the text box to let you know which one you were in.
Stylish focus
The default styling for focus indicators of many browsers has been the same for years, an outline around a link when it is in focus. The style (solid or dashed) and the color varies with which browser was used. Buttons and form styles vary more widely.
What can a designer or developer do? Style the focus indicator with CSS!
a:focus {
outline-color: var(--accent);
outline-style: dashed;
outline-width: 2px;
}
This CSS example makes a 2 pixel wide dashed outline around a link with the current accent color. Confused by the var(--accent)? It is a CSS custom property.
Keep the focus (indicator)
Do not remove focus indicators. Change their styles to coordinate with your site design. Focus indicators are required by WCAG 2.1 AA.