3.1 Keyboard focus must have a clear visual highlight for all actionable items

Some users are not able to use a mouse and instead will rely on a keyboard or similar tool. For these users they will navigate one by one through the interactive elements on the page. The only way they will know where they currently are and what they will be interacting with is visual focus styling.

WCAG 2.4.7: Focus Visible Opens in a new window

Details

  • Every interactive element has a visual change when it gains keyboard focus.
  • Whenever possible the native focus indicator should be used. This allows the user to override it and choose their own focus indicator based on needs.
  • If the native focus must be changed, the focus indicator that is added must have a contrast ratio of 3.00:1 or higher against the adjacent background.
  • If the native focus must be changed and relies only on color, the focus indicator must have a contrast ratio of 3.00:1 or higher with the colors changed from the unfocused state.

Tips

  • Never add outline:0 or outline:none on focus.

Tools & Resources