2.4.11 Focus Appearance (Level AA)

Make sure the area that receives focus stands out from the background.

What you need to know

As you tab through a webpage using the keyboard, a focus indicator visually lets you know where you are on the page.
This success criterion requires the focus indicator to meet a minimum level of contrast and size.
The most common way of meeting this criterion is to provide a solid rectangle around the focused element.
If the focus indicator isn’t solid, for example, if it’s a dashed or dotted line, then the thickness of the focus indicator must increase.

Ensure every element in your digital style guide has a designed focus state. Based on the different types of elements in your design system, identify the various types of focus indicators that may be required.
For each type of focus indicator, ensure the following is true:
- It has at least 3:1 contrast with every adjacent color (i.e. every color it touches—background, element, etc.)
- For the part of the focus indicator that is visible, its size is greater than or equal to the perimeter of the element (the distance around the element’s border).
  - For example, if a button is 40px by 20px, its perimeter is 40 + 40 + 20 + 20 = 120px. Therefore, any focus indicator must be at least equivalent in size.
  - Tip: If the size of the focus indicator is not sufficient, simply thicken its border by a few pixels.