Understanding Success Criterion 2.4.11: Focus Appearance (Minimum)

Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): For the keyboard focus indicator of each User Interface Component, all of the following are true:

A keyboard focus indicator which has a pattern or gradient may have parts that do not meet the 3:1 contrast ratio for the change of contrast, as long as an area equal to the minimum does meet the contrast ratio.

If the control has a visible boundary smaller than the hit area, the size measure is taken from the visible boundary.

The working group is interested in feedback about the minimum area metric, and if there are unusual scenarios where visible indicators are caught by the wording.

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 clearly visible and discernible. This criterion is closely related to SC 2.4.7 focus visible and defines a minimum level of visibility.

For sighted people with mobility impairments who use a keyboard-like device (e.g. a switch, voice input), knowing the current point of focus is very important. Visible focus must also meet the needs of low-vision users, who may also be keyboard-only users.

A keyboard focus indicator can take different forms, this success criterion sets a requirement to make it clearly distinguishable. For example, using a thick outline around the control that contrasts with the background would pass this criterion.

Three links on a white background with the middle one encompassed in a thick black border.
Figure 1 A strong indicator around a link.

Keyboard focus

The keyboard focus is the point of interaction for someone using a keyboard. For environments with a keyboard operable interface, the keyboard focus can be moved around the interface in order to interact with different elements. Whichever element is being interacted with has focus.

In web pages some components may receive focus as a user presses the tab key to move to that component and then use the arrow keys to select an option (e.g. tabs, menu items). The item considered to be focused is whichever is being interacted with. For example, if you tab to a menu and arrow-down to a menu item, it is the menu item that is in focus as pressing enter would activate the menu item.

Some elements can take focus (such as the target of a skip link), however, it is only when the element is operable by keyboard controls that this criterion applies.

Minimum area

The bigger the visible change, the easier it is for someone to see. Authors are encouraged to make the change as significant as possible, for example, by designing a thick border around the element, or significantly changing the background color.

Note

A border is the perimeter of the control, and defines its shape. A border is not a reference to the CSS property of the same name.

The minimum size of the focus indicator must be at least the area taken by a 1 CSS pixel border around the element. The indicator does not have to be a border, but the size of the area must be at least that size. For example, if a control is a rectangle of 90px wide and 30px tall, the size of the outer border is 90 + 90 + 30 + 30 = 240 CSS pixels.

Note

A CSS pixel is what developers use in CSS declarations like “width: 200px”, it is device-independent and not to be confused with device pixels which vary depending on the physical pixel density.
The rest of this document notates CSS pixels as "px".

The following 3 examples use a 90px wide by 30px tall button, therefore the surface area requirement is 240px. The middle button is focused in each example.

Three dark blue buttons on a white background. The middle button has a yellow inner border.
Figure 2 The inner outline is slightly smaller than the outer edge of the component, but using a 2px thick indicator means it is well over the minimum requirement of 240px squared.
Three dark blue buttons on a white background. The middle button has a thick yellow line under the text.
Figure 3 The thick (3px) yellow underline is almost as long as the longest edge, 80px x 3 meets the requirement of 240px.

If controls change size across different variations of a page (e.g. in a responsive design), it helps to use a proportionally sized indicator such as an outline or background change. In that way you can be sure of meeting the size requirement.

The success criterion includes an alternative size measure of "a thickness of at least 8 CSS pixels along the shortest side of the element". Smaller but very thick indicators can be very visible.

Two dark blue buttons on a white background. The left button has a very thick yellow block of color left of the text.
Figure 4The thick (over 8px) yellow block on the left is along the short-side, but very thick.

Typical focus indicators:

  • An outline around the whole component would pass the size requirement;
  • Changing the background of a control would pass the size requirement;
  • A 1px wide vertical line (such as a blinking cursor) would not pass the size requirement, a text input would need a larger or separate focus indicator.

If you need to use complex mathematics to work out if a focus indicator is large enough, it is probably a sign that you should use a larger and proportional indicator that will provide a more visible indicator.

Unusual shapes and gradients

If you have an unusual shape, some mathematics may be required if the focus indicator is on the edge of the size requirement. For example, if the focusable control is a circle with a diameter of 100px, the circumference would be 314 pixels. A 1px (or greater) outline would meet the size criterion.

Two orange circular buttons with an icon in the middle. The right hand circle has a dark outline around the whole circle to indicate focus
Figure 5A circular button in the default state, and then with a focus indicator.

If a focus indicator is an irregular shape, such as a drop-shadow under a star icon, it helps if the contrasting area is obviously quite large.

Two yellow star symbols, the second has a dark drop-shadow.
Figure 6The default and focused states of a star component.

What is the contrasting area of the drop shadow? The quick method is:

  • Look at the size of the component, how long is it around the edges?
  • Look at the (contrasting) area of the focus indicator.
  • Mentally compare the focus indicator to the border of the component.

If it is too close to call, you could extract the contrasting area of the focus indicator and evaluate the surface area.

If a focus indicator has a gradient, the principle is to measure the contrast of the changed area, and ignore the change that does not meet 3:1.

Three buttons, the middle with a heavy drop-shadow indicating focus.
Figure 7When a gradient is used on a focus indictor, the measure of surface area should only include the area that has changed enough to meet the 3:1 contrast ratio.

If you take some spot-checks on the gradient area and establish what area meets the contrast, it is straightforward to work out if that area is sufficient.

The middle button with the drop-shadow included, but the subtle grey areas removed to only show the contrasting area.
Figure 8The focused button with the non-contrasting areas removed, showing that it is a thick indicator that meets the requirements.

If an inline link is broken over two or more lines the indicator can be split between them. In this case the link element is still treated as a single control.

Change of contrast

The greater the change of contrast between states the easier it is for users to see it. Authors are encouraged to make the change of color contrast as great as possible.

When a component changes to include a focus indicator, that change can always be measured as a change of color contrast. For example, if a yellow outline is added to a button on a blue background, the change of color is from blue to yellow.

Note

Color contrast measurements in WCAG are based on luminance (brightness) regardless of the hue.

Three dark blue buttons on a white background. The middle button has a yellow inner border.
Figure 10Adding a yellow outline to a link is a change of color from blue to yellow. That change has a contrast ratio of 12:1.

Text and non-text contrast measures use adjacent colors, this success criterion measures the change in color between non-focused and focused states.

Three buttons with light background and dark border on a white background. The middle button has a light grey outline.
Figure 11The second link has a light-grey (#ccc) focus outline which fails this success criterion because the change from white-background to light-grey outline does not meet 3:1.

It is possible to use visual patterns such as strips switching places to disguise a change of focus indicator. This is not considered a visible indicator.

Adjacent contrast

Where a control is a solid color, and you add a border or outline of a very similar color, it is difficult to perceive the change to the control.

Three dark buttons, the middle one appears very slightly larger due to a thin dark outline.
Figure 12Adding a 1px dark outline around a dark button does not differentiate it, this example fails the success criterion.

The requirement is to have an indicator that has a 3:1 contrast ratio with the adjacent colors (including the component), or to be separated from the component, or to be at least 2px thick.

Three dark buttons, the middle one appears larger due to a thick dark outline.
Figure 13Adding a 2px border around the button helps to differentiate which one is focused.
Three dark buttons, the middle one has a outline slightly offset away from the component, so there is a gap between the component's background and the outline.
Figure 14Adding an outline that is separated from the button helps to differentiate which one is focused.

Not fully obscured

Where other content can overlap with a focused item, the focused element should not be hidden. Typical content which can overlap focused items are sticky footers, sticky headers, or non-modal dialogues. As a user tabs through the page, these layers of content can obscure the focused item, including the focus indicator.

Note

The criterion specifies the "focused item" in the 'Not fully obscured' bullet rather than the "focus indicator". The requirements for the indicator are set in the previous bullets, the last bullet applies to the item as a whole.

Relation to non-text color contrast

Success Criterion 1.4.11 Non-text contrast requires that a UI component maintains contrast across it’s states, including when focused. For example, a checkbox must contrast with its adjacent colors, and the check within the checkbox must contrast with its adjacent colors.

Focus-visible (enhanced) requires that the change of color contrast for the focus indicator (only) has contrast compared to the non-focused component.

Four checkboxes. Unchecked is a plain box. Focused has a circular line outside. Checked is dark green with a white tick. Focused and checked also has a dark green circle around it.
Figure 15Four checkboxes in different combinations of checked and focused. The circular indicators (lines) provide a sufficient change of color contrast.

In the example above:

  • The checkbox has sufficient contrast with its adjacent background in default, focused, checked, and checked-focused states;
  • The check (tick) within the checkbox contrasts with its adjacent color;
  • The circular outline around the checkbox that indicates focus has a sufficient change of contrast.
Two checkboxes, the second has a dark blue outline around it.
Figure 16A default checkbox and a focused checkbox.

The contrast of the default checkbox passes 1.4.11 because the dark border and white background have a contrast ratio greater than 3:1. The 2px dark blue focus outline passes Focus Appearance (Minimum) because the change of contrast is greater than 3:1 with the white background. The component as a whole maintains contrast with the white background so continues to pass 1.4.11.

Benefits

Examples

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

  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

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

user interface component

a part of the content that is perceived by users as a single control for a distinct function

Note

Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.

Note

User interface components include form elements and links as well as components generated by scripts.

Note

What is meant by "component" or "user interface component" here is also sometimes called "user interface element".

An applet has a "control" that can be used to move through content by line or page or random access. Since each of these would need to have a name and be settable independently, they would each be a "user interface component."