Using an author-supplied, highly visible focus indicator

ID: G195

Technology: general

Type: Technique

When to Use

Generally applicable.

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

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.

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.

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