Focus Visible:
Understanding SC 2.4.7
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
Intent of this Success Criterion
The purpose of this success criterion is to help a person know which element has the keyboard focus.
The purpose of this success criterion is to help a person 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.
Note that a keyboard focus indicator can take different forms. One common way is a caret within the text field to indicate that the text field has the keyboard focus. Another is a visual change to a button to indicate that that button has the keyboard focus.
Specific Benefits of Success Criterion 2.4.7:
This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.
People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.
Examples of Success Criterion 2.4.7
When text fields receive focus, a vertical bar is displayed in the field, indicating that the user can insert text, OR all of the text is highlighted, indicating that the user can type over the text.
When a user interface control receives focus, a visible border is displayed around it.
Related Resources
Resources are for information purposes only, no endorsement implied.
Techniques and Failures for Success Criterion 2.4.7 - Focus Visible
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
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 (CSS)
G195: Using an author-supplied, highly visible focus indicator
SCR31: Using script to change the background color or border of the element with focus (Scripting)
FLASH20: Reskinning Flash components to provide highly visible focus indication (Flash)
SL2: Changing The Visual Focus Indicator in Silverlight (Silverlight)
SL7: Designing a Focused Visual State for Custom Silverlight Controls (Silverlight)
Additional Techniques (Advisory) for 2.4.7
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
Highlighting a link or control when the mouse hovers over it (future link)
Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link)
Common Failures for SC 2.4.7
The following are common mistakes that are considered failures of Success Criterion 2.4.7 by the WCAG Working Group.