Technique 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 2.4.7: Focus Visible (Sufficient).

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.

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