Focus Indication and Styling
Learn how the browser determines focus and how we can update the style of the focus indicator.
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” ...