What Is Focus Appearance (WCAG 2.4.11)?
Summary
Focus Appearance defines the visual requirements that make keyboard focus indicators easy to see, including rules for color contrast and size.
Overview
The new criteria for Focus Appearance defines what it takes for users to be able to clearly see the focus indicator, when they are navigating a website with a keyboard.
In WCAG 2.1, we already have a criterion called “Focus Visible” that requires you to ensure that some marking on the page exists to show where users are located when navigating using a keyboard. This marking is called a focus indicator—or focus styling. If the focus indicator is not easy to detect, it’s still practically impossible for users to perform any task. It would be like trying to use a mouse with an invisible mouse cursor.
Requirements
The focus appearance requirements are as follows:
Color contrast
3:1 ratio against surroundings, or
3:1 ratio between focus and non-focus states
Size and shape
Solid border, or
As large as a 1px solid border, or
As large as a 4px solid line along the shortest side
Note that this criterion is marked as “at risk” due to the complexity of testing for it.
Additional Information
Did you find it helpful? Yes No
Send feedback