Techniques for WCAG 2.0

On this page:

-

# G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over

## Applicability

Technologies that contain focusable elements

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

Operating systems have a native indication of focus, which is available in many user agents. The default rendering of the focus indicator isn't always highly visible and may even be difficult to see against certain backgrounds. However, many platforms allow the user to customize the rendering of this focus indicator. Assistive technology can also change the appearance of the native focus indicator. If you use the native focus indicator, any system-wide settings for its visibility will carry over to the Web page. If you draw your own focus indicator, for example by coloring sections of the page in response to user action, these settings will not carry over, and AT will not usually be able to find your focus indicator.

## Examples

### Example 1

The default focus indicator on Microsoft Windows is a one-pixel, black dotted line around the focused element. On a page with a dark background, this can be very difficult to see. The creator of the page uses the default, and the user customizes it in Windows to make it a bright color.

### Example 2

In HTML, form elements and links can be focused by default. In addition, any element with a tabindex attribute >= 0 can take focus. Both types of focused elements use the system focus indicator and will pick up platform changes in the focus indicator style.

## Related Techniques

- G149: Using user interface components that are highlighted by the user agent when they receive focus
- 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. Use the features of your platform to customize the appearance of the focus indicator

2. Tab through the page, noting the path of the focus

3. Check that the focus indicator for each control is visible

### Expected Results

- Check #3 is true

- Top
- Contents
- Intro
- Previous: Technique G164
- Next: Technique G166