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.

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.

Benefits of Focus Visible

• 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 Focus Visible

• 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.

Resources for Focus Visible

• Styling form controls with CSS, revisited

Techniques for Focus Visible