Creating a strong focus indicator within the component

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

All technologies that support CSS.

This technique is not referenced from any Understanding document.

Description

The objective of this technique is to create a highly visible focus indicator that has sufficient contrast against the internal background color of a component.

Examples

The examples demonstrate a simple implementation where a focus styles is applied to blue background. As the indicator is contained inside the component, you can be sure it maintains contrast whatever background the component is placed on

Example 1: Inner border

HTML

<button>Example button</button>

CSS to provide the indicator. It narrows the scope to buttons within the main element. 

button { 
    background-color: #3f86d4 /* medium blue */
    color: white;
    padding: 10px;
    border: 1px #333 solid;
}
main button:focus { 
    outline: 2px #fff5be solid; /* light yellow */
    outline-offset: -4px;
}
Three blue buttons with a dark border, the middle button showing a bright yellow outline inside the button.
Figure 1 The default and focused states of the button.

Resources

Resources are for information purposes only, no endorsement implied.

Tests

Procedure

For each focusable user interface element:

  1. Place keyboard focus on each focusable user interface element on the page using the keyboard.
  2. Check that the focus indicator area is at least the size of a 2 CSS px border around the component.
  3. Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 for the minimum focus indicator area.

Expected Results

  • #2 and #3 are true.