‘Focus Appearance (Enhanced)’ requires that focus indicators are more clearly distinguishable when active.
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.
- Non-Text Contrast
- Focus Visible
- Focus Appearance (Minimum)
- Understanding Success Criterion 2.4.12 (W3C)
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.