Managing User Focus with :focus-visible

This is the second in a series on accessible form design. If you missed the first installment, check out "Accessible Forms with Pseudo Classes." This post focuses on the :focus-visible pseudo-class and its effective use in web development.

Understanding Focus

Before diving into :focus-visible, let's review the :focus pseudo-class in CSS. focus visually indicates user interaction (keyboard, mouse, trackpad, or assistive technology) with an element. Naturally interactive elements, such as links, buttons, and form fields, require clear focus indicators to maintain user awareness.

Avoid This CSS!

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Removing the default :focus outline removes crucial visual feedback for all users. Always preserve focus indicators. If removal is absolutely necessary, ensure a visually equivalent, accessible alternative is provided. If design concerns arise, collaborate to find an accessible solution.

Introducing :focus-visible

The :focus-visible pseudo-class provides a focus indicator similar to :focus, but with improved user experience. Its syntax is straightforward:

<code>:focus-visible {
  /* ...styles... */
}</code>

For specific elements:

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

focus-visible allows for visually striking focus indicators without unnecessary visual clutter on mouse clicks/taps. If not implemented, the default browser focus ring (often considered undesirable) remains.

The History of :focus-visible

Prior to :focus-visible, default browser styles applied :focus broadly, often resulting in an unappealing "focus ring." Many developers removed this ring, inadvertently creating accessibility issues for keyboard users.

Modern browsers use heuristics (algorithms to find good choices) to determine when a focus ring is beneficial, based on user input method (keyboard, mouse, etc.). This means the browser intelligently applies or omits the focus ring.

Early implementations relied on polyfills (like those by Alice Boxhall and Brian Kardell, and Mozilla's :moz-focusring) before the official specification. Rob Dodson's A11y Casts offer further insights into this evolution.

Why Focus Matters

Providing clear focus indicators is paramount for accessibility. Users, especially those with disabilities, need to understand their location and interactions within a webpage. The Two Blind Brothers website (https://www.php.cn/link/a21852bf267634b8db7f0633120e5620) serves as a powerful example of how visual cues are essential for navigation.

Demo and Code

The following code demonstrates :focus-visible in action. The focus ring appears only when navigating with a keyboard, demonstrating the browser's intelligent heuristic.

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Browser Support and Fallbacks

Browser support varies. Use @supports (a feature query) for fallback styles in unsupported browsers:

<code>:focus-visible {
  /* ...styles... */
}</code>

Additional Accessibility Considerations

• Ensure focus indicator colors meet WCAG 2.2 Non-text Contrast (Level AA) guidelines.
• Avoid cognitive overload by maintaining consistent styles across interactive elements.

Browser Support (from caniuse.com): (Table would be recreated here with updated caniuse data)

Further Reading:

• https://www.php.cn/link/fdac69c3eee7bd0427535354eae235a4
• https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

The above is the detailed content of Managing User Focus with :focus-visible. For more information, please follow other related articles on the PHP Chinese website!