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

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

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

  • Checks #2, #4, and #5 are true.