2.4.13: Focus Appearance [AAA]
When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
- is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
- The focus indicator is determined by the user agent and cannot be adjusted by the author, or
- The focus indicator and the indicator's background color are not modified by the author.
What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.
Sufficient Techniques for Success Criterion 2.4.13
Note: Other techniques may also be sufficient if they meet the success criterion. See Understanding Techniques.
Advisory Techniques for Success Criterion 2.5.3
- If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)
Failures for Success Criterion 2.4.13
- Using a CSS border for inline text which can wrap (Potential future technique)