About

Version: WCAG 2.2 and up
Number: 2.4.13
Level: AAA
Applicability:
  • Buttons
  • Controls
  • Inputs
Requirement:

When the keyboard focus indicator is visible, one or both of the following are true:

  1. The entire focus indicator meets all the following:

    • encloses the user interface component or sub-component that is focused, and
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.

  2. An area of the focus indicator meets all the following:

    • is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component or sub-component, and
    • has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
    • has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.

Exceptions:

  • The focus indicator is determined by the user agent and cannot be adjusted by the author, or
  • The focus indicator and the indicator's background color are not modified by the author.
Guidance:
Techniques: Techniques are not yet available for WCAG 2.2 success criteria.

Purpose

The purpose of this success criterion is to ensure that the keyboard focus indicator solidly bounds or surrounds the active user interface component so that users can clearly discern it.

This success criterion is similar to 2.4.7, which requires that there be a focus indicator, but sets requirements for the focus indicator itself.

How to Meet

A custom keyboard focus indicator is created when an author restyles an element when it receives focus (i.e., is tabbed to). The styling is typically tied to the CSS focus selector.

The most direct way to meet this success criterion is to ensure that indicator fully bounds or encloses the active user interface component and has a 3:1 contrast ratio both with the pixels over which it is drawn and the pixels on either side. The indicator must additionally be a solid line (e.g., not dashed or dotted).

When it is not possible to fully enclose the component in a solid outline, authors need to ensure that the indicator meets the requirements for its length and thickness as expressed in the second requirement. Refer to the understanding document for more information about how to apply this requirement to different types of indicators.

Note that this success criterion does not apply to focus indicators implemented by the user agent.

Additional Information

The following knowledge base pages provide more information about how to address this success criterion for publishing content: