Technique G223:Using an author-supplied, highly visible focus indicator
About this Technique
This technique is not referenced from any Understanding document.
This technique applies to all technologies.
Description
The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. This technique is very similar to G195, but with a stronger indicator to meet Focus Appearance.
Examples
Example 1: Links
A Web page has a dark background color and light text and links. When focus lands on a link, the link is outlined with a bright yellow line, 3 pixels wide.
Example 2: Form Elements
A Web page includes a form inside a table. The borders of both the table and the form elements are thin, black lines. When focus lands on a form element, the element is outlined with a 5 pixel red line that is partially transparent. The red is equivalent to a hex color of #CA0000, providing a 6:1 contrast ratio with the white background.
Tests
Procedure
For each user interface component on the page that should receive keyboard focus:
- Navigate to the component and check that it has a visible focus indicator that is not obscured by other content.
- Check that the focus indicator area is at least double the size of a 1 CSS px border around the component.
- Check that the change of contrast of the indicator between focused and unfocused states has a ratio of 4.5:1 or more for the minimum focus indicator area.
Expected Results
- All checks are true.