Marcelo Paiva

All criteriaPresent as slides

An older man in profile sits among rows of theater seats, looking upward at swirling clouds and stars.Meant to show: An older man with clouded eyes

Success criterion 2.4.13

Focus Appearance

When the keyboard focus indicator is visible, it has a high contrast ratio and covers a large area, making it unmistakable when elements are focused.

  • Level AAA
  • Principle 2: Operable
  • Guideline 2.4: Navigable
  • New in WCAG 2.2

In a user’s words

“Make the spotlight on the screen as clear as the one on Broadway; my focus deserves to stand out!”

Who this helps: Visual Impairments

What each role can do

Product manager
Ensure that the focus indicator is prominent and easy to distinguish when elements are selected.
Designer
Design focus indicators that are large and have a high contrast ratio to be easily noticed.
Developer
Implement focus styles that exceed the minimum contrast ratio and cover an area at least as large as a 2 CSS pixel thick perimeter of the unfocused component.
Tester
Test the focus indicator under various conditions to ensure it remains visible and distinct from its unfocused state.

Once it is fixed

“Now when I tab through your site, the focus jumps out at me, clear and bold. It's like having front-row seats to the action of the web. Thank you for the star treatment!”

The quotes are written to illustrate the criterion. They are not testimonials from real people. For the official wording, find 2.4.13 in the W3C quick reference for WCAG 2.2 (opens in a new tab).

Or press the left arrow and the right arrow.