# 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

- All checks are true.

## Related Techniques

- G149
- G165
- C15
- SCR31