Designers

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.

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.

Related Resource