Applicability
Generally applicable.
This technique is not referenced from any Understanding document.
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: Using an author-supplied, visible focus indicator, but with a stronger indicator to meet Focus Appearance (Enhanced).
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
- Checks #2, #4, and #5 are true.