Technique G223:Using an author-supplied, highly visible focus indicator

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 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.

Example 3: Menus

A Web page includes an interactive menu with sub-menus. A user can move focus in the menu using the arrow keys. As focus moves, the currently focused menu item changes its background to a different color, which has a 15:1 contrast ratio with the surrounding items (whilst maintaining text contrast).

Applicability

Generally applicable.

Tests

Procedure

For each user interface component on the page that should receive keyboard focus:

  1. Navigate to the component and check that it has a visible focus indicator that is not obscured by other content.
  2. Check that the focus indicator area is at least double the size of a 1 CSS px border around the component.
  3. 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.
Back to Top