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:



How does this work?

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

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

More guidance for Design

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!

    a /* or a:focus */ {
      outline: none; /* or outline: 0;*/

  <!--  -->

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

Good example

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

  a:focus {
    box-shadow: 0 0 0 0.2rem ff40b8;
    outline: none;

<!--  -->

<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

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.



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