Focus Indication and Styling
Explore how to create and style visual focus indicators that help users navigate websites using keyboards or assistive technologies. Understand when and how focus styles are applied, the importance of maintaining high visibility, and how to adapt focus indicators for different themes while ensuring accessibility standards are met.
We'll cover the following...
In addition to the focus order, we also need to ensure that we’ve considered the style of the visual focus indicator. That visual indicator is what allows the user to find the focused-upon element on the page, which means it’s essential for accessibility.
How does the browser determine focus?
As we may have noticed, if we’ve ever attempted to change the style of the focus indicator, the :focus-visible pseudo-class is what determines how a focused element looks and feels. But when exactly does :focus-visible get applied? According to the W3C Selectors Level 4 specifications, there are a few contributing factors. While this document is a draft, many browsers use it as guidance and have already taken up the suggestions.
User preference
By default, the focus indicator isn’t visible until keyboard navigation is prompted, such as when the user clicks the “Tab” key to focus on the first element on the page. However, the focus indicator may be showing at all times if the user has requested it. For example, a user can ...