accessibility-guidelines

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

Back to the overview page

Focus visible

On this page:

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.

Requirements

Common mistakes

Why?

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

Doing better

Include keyboard focus state for all interactive components in your designs

More guidance for Design

Guidance for iOS

This section needs more content. Contribute via Github or email.

Guidance for Android

This section needs more content. Contribute via Github or email.

Guidance for Flutter

This section needs more content. Contribute via Github or email.

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 …

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

More info

Sources

Contribute

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

This site is open source. Improve this page.