Techniques for WCAG 2.0

On this page:

-

# G195: Using an author-supplied, highly visible focus indicator

## Applicability

Generally applicable.

This technique relates to:

- Success Criterion 2.4.7 (Focus Visible)
  - How to Meet 2.4.7 (Focus Visible)
  - Understanding Success Criterion 2.4.7 (Focus Visible)

## Description

The objective of this technique is enhance the focus indicator in the browser, by creating a highly visible one in the content. The default focus indicator in many browsers is a thin,dotted, black line. It can be difficult to see the line when it is around a form element which already has an outline, when the focused element is inside a table cell, when the focused element is very small, or when the background of the page is a dark color.

In this technique, when the user places focus on an element, using the mouse, tab key, arrow keys, keyboard shortcuts, or any other method, the application makes that focus more visible, using a combination of a highly contrasting color, a thick line, and other visual indicators such as a glow.

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

### 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 3:1 contrast ratio with the surrouding items and a 4.5:1 contrast ratio with its own text.

## Related Techniques

- G149: Using user interface components that are highlighted by the user agent when they receive focus
- G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
- C15: Using CSS to change the presentation of a user interface component when it receives focus
- SCR31: Using script to change the background color or border of the element with focus

## Tests

### Procedure

1. Place focus on each focusable user interface element on the page using the mouse.

2. Check that there is a highly visible focus indicator.

3. Place focus on each focusable user interface element on the page using the keyboard.

4. Check that there is a highly visible focus indicator.

### Expected Results

- Checks #2 and #4 are true.

- Top
- Contents
- Intro
- Previous: Technique G194
- Next: Technique G196