Understanding Success Criterion 2.4.7: Focus Visible

Success Criterion 2.4.7 Focus Visible (Level A): Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

Intent

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.

“Mode of operation” accounts for user-agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.

Note that a keyboard focus indicator can take different forms. New in WCAG 22: This criterion does not specify what the form is, but Focus Appearance (Minimum) does define how visible the indicator should be. Passing Focus Appearance (Minimum) would pass this success criterion.

Benefits

Examples

Related Resources

Resources are for information purposes only, no endorsement implied.

Techniques

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

Sufficient Techniques

  1. G149: Using user interface components that are highlighted by the user agent when they receive focus
  2. C15: 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. G195: Using an author-supplied, highly visible focus indicator
  5. C40: Creating a two-color focus indicator to ensure sufficient contrast with all components
  6. SCR31: Using script to change the background color or border of the element with focus
  7. SL2: Changing The Visual Focus Indicator in Silverlight
  8. SL7: Designing a Focused Visual State for Custom Silverlight Controls

Failures

The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.

Key Terms