# Using CSS `:focus-visible` to provide keyboard focus indication

## Metadata

CSS

## When to Use

All technologies that support CSS.

## Description

The objective of this technique is to provide custom styles for interactive elements when they receive keyboard focus. In this example, this is achieved using the CSS `:focus-visible` pseudo-class.

Styles defined with the regular `:focus` pseudo-class are applied whenever an element has focus, regardless of how it received focus. In contrast, user agents apply additional heuristics and logic to decide when to show `:focus-visible` styles – in particular, browsers always show these styles when a user is navigating using the keyboard, but will generally not show them as a result of a mouse/pointer interaction (with the exception of elements that also support keyboard input, such as `<input>` elements). This allows authors to provide strong visible focus indication for keyboard users, without forcing them on mouse/pointer users who may not necessarily want or need them (for instance, because they find them visually distracting).

This satisfies the requirement of providing a mode of operation where the keyboard focus indicator is visible.

This technique is only sufficient if it uses styles that provide a visible focus indicator.

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` style for these cases.

## Examples

### Using CSS `:focus-visible` to provide keyboard focus indication

In this example, we have a standard `<button>` control in the HTML.

By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using `Tab`.

In order to make this focus indication more prominent, we use the `:focus-visible` pseudo-class selector to define a more intentional and pronounced focus style.

Working example: Using CSS `:focus-visible` to provide keyboard focus indication.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,
                  initial-scale=1, shrink-to-fit=no">
      <title>Using CSS :focus-visible to
             provide keyboard focus indication</title>
      <style>
        /* Specific :focus-visible styles */

        :focus-visible {
          outline: 5px solid red;
        }
        …
      </style>
    </head>
    <body>
      …
      <button>Example button</button>
      …
    </body>
    </html>

## Tests

### Procedure

For each user interface component that can receive keyboard focus:

1. Set focus to the interface component using the keyboard (generally, navigating to the component using `Tab`/`Shift+Tab`)
2. Verify that once the component has received focus, a focus indicator is visible

### Expected Results

- Check #2 is true.

## Related Techniques

1. C15
2. G165
3. G195
4. C40

## Resources

1. CSS Selectors Level 4 - `:focus-visible` pseudo-class.
2. MDN - `:focus-visible` pseudo-class.