# Understanding Focus Visible

## In brief

Goal
  Users know which element has keyboard focus.
What to do
  Ensure each item receiving focus has a visible indicator.
Why it's important
  Without a focus indicator, sighted keyboard users cannot operate the page.

## Intent of Focus Visible

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

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

There may be situations where mouse/pointer users could also benefit from having a visible focus indicator, even though they did not set focus to an element using the keyboard. As a best practice, consider still providing an explicit focus indicator for these cases.

Note that a keyboard focus indicator can take different forms. While Focus Visible does not specify what that form is, 2.4.13 Focus Appearance (Level AAA) provides guidance on creating a consistent, visible indicator.

## 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

### Sufficient Techniques for Focus Visible

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

### Additional Techniques (Advisory) for Focus Visible

### Failures for Focus Visible

- Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
- Failure due to styling element outlines and borders in a way that overrides or renders non-visible the default visual focus indicator