Skip to content

Technique C45:Using CSS :focus-visible to provide keyboard focus indication

About this Technique

This technique relates to 2.4.7: Focus Visible (Sufficient).

This technique applies to 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.

Note

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

Note

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

Example 1: 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>

Related Resources

No endorsement implied.

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

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.
Back to Top