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.
What you need to do
- 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.
Reference
Read the full explanation of success criterion 2.4.11 on W3.org.