Focus Indication and Styling

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 adjust OS (operating system) or browser settings to always have a focus indicator visible on the page. This is beneficial to users who know in advance that they will always be using a keyboard or alternative navigation method.

When the user interacts with a focusable element

When a user interacts with a focusable element—no matter the method of interaction—the focus should appear. For example, when we interact with the input box in the example below, the focus indicator appears. It doesn’t matter whether we’ve clicked into the input box, tapped on the input box, or tabbed to the input box via the keyboard. The focus indicator will appear regardless. Explore the example below to see how many different ways the focus indicator can be triggered.