2.4.7 - Focus visible

Make sure that keyboard-only users can clearly see which interactive control is focused when they tab through them.

Summary

It should be easy to tell which element has keyboard focus.

Requirements

  • When actionable items receive the keyboard focus, their visual appearance changes (e.g. a box appears around them, links become underlined, the colour of the text or of the background changes).

Common mistakes

  • The keyboard focus indicator has been suppressed.

Why?

  • Sighted keyboard and switch device users track where they are on a page/screen as they navigate through focusable elements, similar to using a remote control with a TV interface.

Official wording in the Web Content Accessibility Guidelines

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

See the W3C's detailed explanation of this guideline with techniques and examples.

Guidance for Design

  • Do not remove the browser's default focus indicator unless you're also providing an alternative keyboard focus indicator.

Doing better

Include keyboard focus state for all interactive components in your designs

  • Do not depend on a browser's default visible states for keyboard focus.
    • Their colour may clash with your design or blend into the background colour.
    • Some browser's default focus indicators have very poor contrast.

More guidance for Design

Guidance for Web

Do not disable focus styles, unless you've already implemented improved focus styles

By default, native HTML elements have a visual focus indicator provided by the browser. Therefore, links and focusable elements must not have their outline suppressed via CSS, unless a custom focus indicator is provided.

Failure example

// Never do this, // unless you’ve already replaced the default focus outline
with better custom focus styles!

<style>
  a {
    outline: none; /* or outline: 0;*/
  }
</style>

<!--  -->

<a href="..."> Next </a>

To prevent keyboard focus styles from appearing when users click interactive elements, use the :focus-visible polyfill

What's the use case?

Browsers' default focus styles don't appear when people click or tap buttons or links. However, if you define your own enhanced styles using the CSS :focus pseu-do class, those styles will appear on click/tap as well.

Sometimes clients or designers don’t like to see a focus ring appear on a custom button or element when it gets clicked. They might say to a developer: “Get rid of that focus ring”.

But if you got rid of focus rings entirely, the interface would become unusable for keyboard users.

How the :focus-visible CSS selector solves that problem

Using the :focus-visible CSS selector allows you to …

  • disable focus ring styles on elements when they are focused via mouse / touch
  • … while leaving them intact when that element gets focused using the keyboard or in code.

In itself, :focus-visible doesn’t have any accessibility benefit. Just keeping the focus visible for all users is fine from an accessibility perspective. But it’s a good way to handle clients or designers’ requests for the focus ring to be removed for mouse or touch users, which would disable keyboard users.

You need a polyfill to use :focus-visible

As of Feb 2020 :focus-visible is only supported by default in Firefox. But the :focus-visible polyfill is small and robust.

More guidance for Web

Discuss on Twitter • View on GitHub • Main Sources