Understanding Focus Visible

Intent of Focus Visible

The purpose of this success criterion is to help a person know which element has the keyboard focus.

It must be possible for a person to know which element among multiple elements has the keyboard focus. If there is only one keyboard actionable control on the screen, the success criterion would be met because the visual design presents only one keyboard actionable item.

Where the success criterion says “mode of operation”, this is to account for platforms which may not always show a focus indicator. In most cases there is only one mode of operation so this success criteria applies.

Note that a keyboard focus indicator can take different forms. This criterion does not specify what the form is, but Focus Visible (Enhanced) does define how visible the indicator should be. Passing Focus Visible (Enhanced) would pass this success criterion.

Benefits of Focus Visible

Examples of Focus Visible

Resources for Focus Visible

Techniques for Focus Visible

Sufficient Techniques for Focus Visible

  1. Using user interface components that are highlighted by the user agent when they receive focus
  2. Using CSS to change the presentation of a user interface component when it receives focus
  3. G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
  4. Using an author-supplied, highly visible focus indicator
  5. Creating a two-color focus indicator to ensure sufficient contrast
  6. Using script to change the background color or border of the element with focus
  7. Reskinning Flash components to provide highly visible focus indication

Additional Techniques (Advisory) for Focus Visible

Failures for Focus Visible