Understanding Success Criterion 2.4.12: Focus Appearance (Enhanced)

Success Criterion 2.4.12 Focus Appearance (Enhanced) (Level AAA): For the keyboard focus indicator of each User Interface Component, all of the following are true:

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:

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).

Examples

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

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 focus indicator within the component

Failures

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

Key Terms

css pixel

visual angle of about 0.0213 degrees

A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [[!css3-values]], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).

focus indication area

the pixels that change between the focused and unfocused states of a User Interface Component