Understanding:Success Criterion 2.4.12: Focus Appearance (Enhanced)

Success Criterion 2.4.12 Focus Appearance (Enhanced) (Level AAA): When user interface components have keyboard focus, all of the following are true:

  • Contrasting area: There is an area of the focus indicator that has a contrast ratio of at least 4.5:1 between the colors in the focused and unfocused states.
  • Minimum area: The contrasting area is at least double the area of a 1 CSS pixel thick perimeter of the unfocused component;
  • Not obscured: No part of the focus indicator is hidden by author-created content.

Status

This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.

Intent

The purpose of this success criterion is to ensure a keyboard focus indicator is highly visible. This criterion is closely related to Success Criterion 2.4.11 Focus Appearance (Minimum) and defines a higher level of visibility for the focus indicator.

In relation to Focus Visible (enhanced) this criterion:

  • Expands the minimum area to 2 CSS pixels around the perimeter.
  • Increases the change of contrast to 4.5:1.
  • Does not allow for any part of the element to be obscured by other content.

The other aspects of the success criterion are the same as Focus Visible (Minimum).

Benefits

The benefits of this success criterion are similar to Focus Appearance (Minimum).

  • Sighted keyboard users can visually determine which component will be interacted with using keyboard operations.
  • People with low vision are better able to follow a highly visible focus indicator.
  • People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.

Examples

The examples of this success criterion are similar to Focus Appearance (Minimum).

  • When links receive focus, an outline is displayed around the link that contrasts with the background adjacent to the link.
  • When buttons receive focus, and outline is displayed within the button (around the text) that contrasts with the button’s background.
  • When text fields receive focus, an outline is displayed around the field, indicating that the input has focus.
  • When radio buttons receive focus, an outline is displayed around the control, indicating that the input has focus.

Techniques

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

Sufficient Techniques

@@@ Create a new techniques based on:

  1. G195: Using an author-supplied, highly visible focus indicator
  2. C40: Creating a two-color focus indicator to ensure sufficient contrast with all components
  3. C41: Creating a strong focus indicator within the component

Failures

The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.

Back to Top