Understanding Focus Visible

In brief

Goal
Users know which element has keyboard focus.
What to do
Ensure each item receiving focus has a visible indicator.
Why it's important
Without a focus indicator, sighted keyboard users cannot operate the page.

Intent of Focus Visible

The purpose of this success criterion is to help a person know which element has the keyboard focus.

“Mode of operation” accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.

There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit focus indicator for these cases.

Note that a keyboard focus indicator can take different forms. While Focus Visible does not specify what that form is, 2.4.13 Focus Appearance (Level AAA) provides guidance on creating a consistent, visible indicator.

Benefits of Focus Visible

Examples of Focus Visible

Resources for Focus Visible

Techniques for Focus Visible

Sufficient Techniques for Focus Visible

Additional Techniques (Advisory) for Focus Visible

Failures for Focus Visible