accessibility-guidelines

This document is in beta. Help us by reporting issues via Github or email.

Back to the overview page

Focus visible

When people press the Tab key to navigate through the interactive elements on the page, make sure they can see which element has the keyboard focus.

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

On this page:

Requirements
Common mistakes
Guidance for Design
Guidance for code
More info

Requirements

When interactive elements receive the keyboard focus, their visual appearance must change. For example:
- an outline could appear around focused elements;
- links could become underlined;
- the text or background colour of the element could change.

Why?

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

How does this work?

See Rob Dodson explain ‘Focus rings’ in this short video:

See the ‘Non-text contrast’ requirements about the contrast of the keyboard focus indicator.

Common mistakes

The keyboard focus indicator has been suppressed.

Some sites suppress the browser’s default focus indicator (using outline: 0 or none), without replacing it with a better focus indicator.

Failure example: Jet2Holidays

Guidance for Design

Do not remove the browser’s default focus indicator unless you’re also providing an alternative keyboard focus indicator.
It’s also better include enhanced focus indicators in your designs, rather than relying on the browser’s default focus indicators.
- This is most browsers’ default focus indicators have poor contrast (except for Edge and Chrome).

More guidance for Design

GDS Design System for example of good focus indicators
Rob Dodson’s A11ycast episode on focus rings
Tips for Designing Useful and Usable Focus Indicators by Deque

Guidance for code

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!

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

<body>
  <!--  -->

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

Good example

// Doing `outline: none` or `0` is fine is you're replacing the browser default
focus outline with better styles.

<style>
  a:focus {
    box-shadow: 0 0 0 0.2rem ff40b8;
    outline: none;
  }
</style>

<!--  -->

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

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

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.

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 code

:focus-visible and backwards compatibility by The Paciello Group
Rob Dodson’s A11ycast episode on focus rings

More info

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.

Sources

Contribute