Focus Appearance

Success criterion 2.4.13 · Level AAA

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.

Principle 2: Operable · Guideline 2.4: Navigable

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!”