Visible focus indicators

Sighted keyboard users must be able to see which user interface component has focus so that they know what — if anything — they are interacting with.

This means that every interactive control must show a clearly visible indicator when it has keyboard focus. These are also called ‘focus indicators’ or ‘focus rings’.

Meeting the Web Accessibility Standard

When all keyboard operable controls on a page have a visible focus indicator, this meets WCAG 2 Success Criterion 2.4.7 Focus Visible (Level AA).

When an interactive control’s visible focus indicator has a minimum contrast ratio of at least 3:1 against adjacent colours, it meets WCAG 2 Success Criterion 1.4.11 — Non-text Contrast (Level AA).

Default visible focus indicators

By default, natively focusable HTML controls, like <a href> or <input type="checkbox">, have a visible focus indicator set by the browser.

In Chrome, Edge and Safari, this is usually a blue outline.

In Firefox, it’s a dotted outline.

Default indicators are not always visible

The default focus indicator provided by the browser is not always visible in all situations. This could be because it:

does not have sufficient contrast against the page’s colours to be seen
has been removed by the designer or developer.

It’s important to ensure that the colour of the visible focus indicator has sufficient contrast against its surrounding colours.

It’s only acceptable to remove the default focus indicator when a suitable replacement indicator is provided.

Styling focus indicators

`:focus`

The :focus CSS pseudo-class represents an element’s focused state. That is, when an element has keyboard focus, any CSS rules assigned to it via :focus are applied.

For more about using :focus, see :focus — MDN Web Docs.

Replacing the default `:focus`

Note: Never remove the default focus indicator without replacing it. That leaves sighted users without a way to see what they’re interacting with in the page.

Sometimes designers will ask for the default focus indicator to be removed for aesthetic reasons. And so the developer removes the default focus indicator by using CSS like :focus {outline: none;}, but does not provide any alternative focus indicator. This is bad practice.

Instead, replace the default outline with a different outline or some other visual indicator that makes the currently focused item visually stand out from all the other content.

`:focus-visible`

In some scenarios, designers will ask for the default focus indicator to be removed because it can introduce confusion for sighted mouse users who are not interested in keyboard focus.

Since removing the default focus indicator is bad for accessibility, the :focus-visible pseudo-class was created.

The :focus-visible pseudo-class applies to an element when:

it would normally match the :focus pseudo-class, and
the browser determines that visible keyboard focus should be displayed for the user.

The :focus-visible pseudo-class tries to ensure that:

keyboard users always get a visible focus indicator
mouse users get the indicator only when it’s needed, for example, when on a text field.

For more on the :focus-visible pseudo-class and how to use it, see:

Minimum contrast and appearance

Focus indicators must have a contrast ratio of at least 3:1 against their surrounding colours — see Contrast for states — Knowledge Area: Colour and contrast.

Meeting luminance contrast requirements ensures that focus indicators stand out for people with colour vision deficiencies or low vision. If the contrast of the focus indicator against the surrounding colours is too low, the indicator might as well not exist.

The upcoming Web Content Accessibility Guidelines (WCAG) 2.2 includes the new Success Criterion 2.4.11 Focus Appearance (Minimum), which sets minimum contrast and area requirements for focus indicators. For more on this new Success Criterion, see:

More information on visible focus indicators

To better understand, design and implement visible focus indicators for your interactive content, see: