Tests
- Sufficient Size: The thickness/length of the focus indicator change is [a sufficient size to be noticeable].
- Editor’s note: We will use a metric of 2px of the perimeter -20% as a starting point. This metric needs usability testing, please get in touch if you could help facilitate this.
- Note: Text within a control is not considered part of the size metric.
- Change of contrast: The contrast change of the pixels that indicate the keyboard focus is [sufficient] in a) standard mode, b) dark mode, and c) high contrast mode.
- Editor’s note: The contrast metric is to be determined, but assumed to be similar to a large-text level.
- Adjacent Contrast: The focus indicator has sufficient contrast with the adjacent colors in a) standard mode, b) dark mode, and c) high contrast mode
- Editor’s Note: There is a relationship between the area of the focus indicator and contrast that will need to be clarified. E.g. a higher contrast area may not need to be as large.
- Note: If the focus indicator is adjacent to the focusable element and does not contrast with the element, it can use the size change method.
- Distinct Style: The keyboard focus indicator uses a style that is distinct from the style of other controls, so that the item in focus can be distinguished without reference to the non-focused state.
- Multiple controls: There must be at least 3 visible controls of the same style in the view/page.
- Note: In order for a change of color to be used, there needs to be a basis for comparison, otherwise another method is needed.
- Adjacent: The indicator is closer to the focused element than any other focusable element. (The center of the focused element to the center of the indicator.)
