Focus Appearance (Minimum) (2.4.11 – Level AA)

‘Focus Appearance (Minimum)’ requires that focus indicators are 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 earlier guidance to ensure indicators are visible and have contrast between focused and unfocused states.

How to Pass ‘Focus Appearance (Minimum)’

When a component receives keyboard focus:

• The focus indicator has a contrast ratio of at least 3:1 between focused and unfocused states;
  
• The focus indicator has a contrast ratio of at least 3:1 against adjacent colours;
  
• The element within focus isn’t hidden; and
  
• The focus indicator area:
  • Has an outline that’s at least 1 CSS pixel thick; or
  • Has a shape that’s at least the area of a 4 CSS pixel-thick line;

‘Focus Appearance (Minimum)’ 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 (Enhanced)
• Understanding Success Criterion 2.4.11 (W3C)