Focus Visible is Evolving

Reading Time: 6 minutes

The first public working draft of WCAG 2.2, published February 27, 2020, introduced one new success criterion: 2.4.11 Focus Visible (Enhanced). The guideline for visible focus indicators is the only one that the W3C modified iteratively in both the 2.1 update and the 2.2 update, and each iteration made the success criteria for focus indicators more specific.

Focus Visible in WCAG

The focus state requirement originated in WCAG 2.0, with SC 2.4.7 Focus Visible. The success criterion was simple: a keyboard operable user interface must offer a visible focus indicator. In other words, if you can click it, you should be able to Tab to it, and if you can Tab to it, it should have a focus state. There is no specific guidance in WCAG 2.0 about how visible the indicator should be — technically, it could be a light gray outline on a white background, or a nearly-invisible 1px dotted outline. The “Sufficient Techniques” section suggests changing the background color of the focused element or adding a border. Since 2014 I have recommended a 2px solid border with any color that is visibly salient against the background (and reminding designers, with a heavy sigh, that this will not ruin the interface design, as it only appears when someone is using a keyboard).

WCAG 2.1

The updated guidance in WCAG 2.1, published in 2018, added a new success criterion that impacts, among other features, visible focus indicators. SC 1.4.11 Non-text Contrast requires that visual information required to identify user interface components and states have a contrast ratio of at least 3:1 with adjacent colors. A line in the Intent section of the success criterion, under “Adjacent Colors”, clarifies that “‘adjacent colors’ means the colors adjacent to the component. For example, if an input has a white internal background, dark border, and white external background the ‘adjacent color’ to the component would be the white external background.” According to this guideline, content authors using a border or background color change to indicate focus must ensure that the border color or focus background color contrasts sufficiently with the background color of the webpage.

WCAG 2.2

The WCAG 2.2 working draft refines this even further in SC 2.4.11 Focus Visible (Enhanced). Rather than making the rules around focus states more restrictive, this success criterion provides computable measurements for validation of a focus indicator’s conformance. The phrase “focus indication area” and its associated dimensions may not make sense on first impression, but have no fear — these dimensions are in line with the focus state design patterns that are already common today.

Note: As of writing, WCAG Version 2.2 has not yet been formally adopted, meaning the Accessibility Guidelines Working Group may modify or remove this criterion before the final draft is published.

Interpreting the Requirements

The new success criterion 2.4.11 Focus Visible (Enhanced) in WCAG 2.2 closes the open-ended loop that started in WCAG 2.0 by conferring designers with measurable specifications for visible focus indicators. These specifications allow for designers to try a variety of creative approaches to focus states and to test them against conformance with quantifiable standards. Let’s take a look at how we can combine the requirements from SC 2.4.7 (WCAG 2.0) with SC 1.4.11 (2.1) and SC 2.4.11 (2.2) to come up with some design patterns that meet all the criteria.

Focus State: Background Color

The background color change requirement in 2.4.11 can can be stated simply: the focus background color must contrast with the default color at a ratio of 3:1. Designers using this technique for visible focus indicators should keep in mind (per SC 1.4.11) that the focus background should also contrast with the adjacent color of the web page’s background at a ratio of 3:1.

In Example 1 above the focus state applies a background color change from white (#fff) to dark blue (#3030bb). These two colors contrast at a ratio of 9.26:1, so the Focus contrast requirement of SC 2.4.11 is satisfied. The focus color also satisfies SC 1.4.11 because it contrasts at the same ratio against the white background of the page.

In Example 2 above the background color changes from red (#ce1818) to white (#fff). The contrast ratio of 5.57 between these colors satisfies the color change requirement of SC 2.4.11. Since the focus background color (white) is the same as the webpage background color, a border is required in the focus state to meet the requirements of SC 1.4.11 for adjacent colors.

Size and Dimensions

In addition to the requirement for changes to background color, SC 2.4.11 lays out requirements regarding the size and dimensions of the focus area. The Minimum area requirement states that the focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels; and the Contrast or thickness requirement states that the focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels. Although these two requirements read like poorly-articulated algebra, they become simple when you lay out the arithmetic.

The focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.

SC 2.4.11: Minimum area

In examples 1 and 2 above the longest side of the bounding rectangle is approx 85px, which multiplied by 2 gives a surface area requirement of 170px2. In these examples the focus indication area, or the area that undergoes a change between unfocused and focused states, is the area of the button without the border. With a border width of 2px on each side, (85px – 4px) * (44 – 4px) = 3240px2, well over the minimum area of 170px2.

The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

SC 2.4.11: Contrast or thickness

In both of these examples, the focus indication area (well over the minimum area) meets a 3:1 contrast ratio with the adjacent color of the webpage background, so this requirement is met as well.

Focus State: Outline

Focus states that add a border or outline to an element require a bit more arithmetic. The text input field in Example 3 below assumes a 2px solid blue outline on focus.

In this case the focus indication area is the width of the outline, 2 pixels, multiplied by its circumference: 2px * 414px = 828px2. The longest side of the bounding rectangle is 176px, which multiplied by 2 CSS pixels is still less than the focus indication area, so the Minimum area requirement of SC 2.4.11 is met. The Focus contrast requirement can be ignored, because there is no color change in this focus state. Finally, Contrast or thickness is met because (a) the focus area has a thickness of at least 2 pixels, and because (b) the color of the outline (#1876DC) meets a contrast ratio greater than 3:1 with adjacent colors.

Summary

Although the WCAG 2.2 success criteria have not been published officially, the requirements within SC 2.4.11 Focus Visible (Enhanced) close the gap in terms of definitive, measurable criteria for focus states. If your focus state consists of a background change, then ensure that the contrast between the default background color and focus background color is 3:1 or greater; ensure the contrast between the focus background color and the webpage background color is 3:1 or greater; and ensure that the surface area of the color change is greater than 2px times the component’s width. If your focus state consists of an outline, then ensure it contrasts with the webpage background at 3:1 or greater and that it is at least 2px thick.