Focus Indicators

Focus indicators allow users to see where they are within the page by visually highlighting interactive elements, making it easier to navigate, interact, and understand the web interface without needing a mouse.

• A visible focus indicator for interactive elements is required for a site to meet the Success Criterion 2.4.7: Focus Visible (Level AA). ¹
• The indicator area that visualizes a component to be focused should have a contrast of at least 3:1. ²
• The Success Criterion 2.4.13: Focus Appearance (Level AAA) mandates, that the focus indicator in addition needs to be "at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component". ³
  • This means the area of the focus indicator must be at least 2×(2×height+2×width) or (4×width + 4×height). ⁴
  • Based on this Criterion every pixel that has contrast of 3:1 or more between the unfocused and focused state can be considered part of the focus indicator area. For example if you already have a black 1px outline in the unfocused state you would need at least a 3px thick outline in the focused state.
  • A keyboard focus indicator can appear in various forms. This Success Criterion suggests using a solid outline around the focused user interface element but also permits other types of indicators, as long as they are at least equally noticeable in size. ³
• Sara Soueidan has an amazing in-depth article about this topic. ⁴
• Do not set outline: none; or outline: 0; even if you use another method like box-shadows. Because high contrast modes will for example not show box-shadows and will overwrite the colors of the outline, but only if the outline is not set to none. They will also often keep the width of the defined outline. Therefore you should set the outline to outline: 2px solid transparent; if you don't use it to create your default focus indicator. ⁵
• The default browser outlines often lack the required contrast and area requirements and often conflict the color palette of the website. Therefore it is recommended to define and test your own custom focus indicator styles that meet the WCAG Success Criteria. ⁴

Sources 

1. Focus Visible (Level AA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
2. Non-text Contrast (Level AA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
3. Focus Appearance (Level AAA) by Accessibility Guidelines Working Group (AG WG) Participants is licensed under W3C Document License
4. A guide to designing accessible, WCAG-conformant focus indicators by Sara Soueidan © Sara Soueidan
5. Use transparent borders and outlines to assist with high contrast mode by Andy Bell