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

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).

Why is it important?

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.

Benefitted disability types

This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.

Summary

Make sure that keyboard-only users can clearly see which interactive control is focused when they tab through them.
It should be easy to tell which element has keyboard focus.

Common mistakes

The keyboard focus indicator has been suppressed.

Design Guide

• Do not remove the browser’s default focus indicator unless you’re also providing an alternative keyboard focus indicator.
• 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.

Focus Visible Examples 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.

References

1. Focus Styles Frequently Asked Questions by Jean-Francois Hector
2. GDS Design System for example of good focus indicators
3. Rob Dodson’s A11ycast episode on focus rings
4. Tips for Designing Useful and Usable Focus Indicators by Deque
5. Accessibility Guidelines- Github.io