Focus Visible - Success Criterion 2.4.7 (Level AA)

Question

In your site or application, do you provide a visual focus indicator for content that can be activated with the keyboard?

Why is this important?

Many people with disabilities use a computer keyboard to navigate pages and interact with content. When keyboard users tab to interactives, they must have a visual indicator in order to know where they are on the page and identify the item that is in focus.

Whom does it benefit?

Example 1

As a person who relies on keyboard only navigation,
I want to tab through the page while seeing a dotted line around focusable content
so that I can easily track where I am.

Example 2

As a person with low vision using screen magnification software,
I want to clearly see which link I have tabbed to
so that I can access the information I want.

What should you do?

Provide a visible border or outline around links, menu items, and other actionable elements when in focus.
Provide a visual change to a button when it has keyboard focus.
Avoid placing visual focus indicators on content that is not interactive.

How do you do it?

Use standard controls which are known to support focus highlighting in web browsers.
Do not disable the default browser outline in your style sheet, unless you are providing an enhanced visual focus.