Focus Visible
Success Criterion 2.4.7 (Level AA)

Question

Does your site or application provide a visual focus indicator when navigating through content using the keyboard?

Why is this important

Many people with disabilities must use a computer keyboard to navigate web pages and interact with content. When keyboard only users tab to interactive elements, there must be a visual indicator showing their keyboard focus in the content. Without this focus being visible some users will not know which element has keyboard focus, so they can interact with it.

Whom does it benefit?

Example 1:

As a person with a mobility impairment who finds it difficult to use a mouse
I want a visual indication of where I am when using my keyboard to navigate a website
so that I can easily identify and select the menu item I want to open using the enter key.

Example 2:

As a person with a cognitive impairment who navigates web pages by keyboard,
I want to visually see what button my keyboard is currently on
so that I can make sure I am choosing the right one before I activate it.

Example 3:

As a person with low vision who uses screen magnification software,
I want to visually see which link I have tabbed to
so that I can select the correct link of the page I want to navigate to.

What should you do?

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

How do you do it?

  • Use standard controls which are known to support focus highlighting in web browsers.
  • Don’t disable the default browser outline in your style sheet, unless you are providing an enhanced visual focus.
  • Use a style sheet to enhance visual feedback when an interactive element has focus.
  • Enhance the focus indicator in the browser by creating a highly visible one in the content.

Need technical guidance?

Additional Resources to help you: