Focus Appearance (Enhanced) (2.4.12 – Level AAA)

‘Focus Appearance (Enhanced)’ requires that focus indicators are more clearly distinguishable when active.

Introduction

Focus indicators help users see which element on a page currently has focus, they are especially useful for people with low-vision, memory or mobility impairments. 

Where a focus indicator is used to show an element has current focus, it must be clearly visible and distinguishable. This goes beyond 2.4.11 to increase contrast requirements and expands the minimum area of the indicator.

How to Pass ‘Focus Appearance (Enhanced)’

When a component receives keyboard focus:

• The focus indicator has a contrast ratio of at least 4.5:1 between focused and unfocused states;
  
• The element within focus isn’t hidden; and
  
• The focus indicator area is at least 2 CSS pixels around the perimeter.

‘Focus Appearance (Enhanced)’ Tips

It may sound basic, but a thick black border around an element when it receives focus will often do the trick (unless your website has a very dark background colour of course).

You could also change the background colour of the whole element on focus.

If you’re worrying about pixel sizes, your indicator probably isn’t clear enough – keep it simple.

See Also

• Non-Text Contrast
• Focus Visible
• Focus Appearance (Minimum)
• Understanding Success Criterion 2.4.12 (W3C)