Focus indicator size sufficient
Supplemental requirement
If a custom focus indicator is used, it has sufficient size and adjacency.
Applies when the user agent’s default focus indicator is replaced by a custom focus indicator.
Tests
Procedure
For each custom focus indicator:
- Check that the focus indicator is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
- Check that the focus indicator has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.
Except when
- 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.
Expected results
- #1 and #2 are true.
Key Terms
- focus indicator
pixels that are changed to visually indicate when a user interface component is in a focused state
- state
dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes
States represent data associated with the component or user interaction possibilities. They do not affect the nature of the component. Examples include focus, hover, select, press, check, visited/unvisited, and expand/collapse.
- user interface component
To be defined.