How to Enable :focus Only on Keyboard Use (or Tab Press)?

Enable :focus Only on Keyboard Use (or Tab Press)

Overview

Disabling :focus when not needed can enhance the user experience by eliminating confusing visual cues. However, it's essential to maintain focus functionality for keyboard users.

Original Solution: Keyboard-Only Focus Styles

Roman Komarov's solution utilizes CSS and HTML to achieve keyboard-only focus styles. It encapsulates focusable elements within a container element and styles only the inner element, leaving the focus state visually accessible to keyboard users.

Improved Solution: :focus-visible Pseudo Class

Update: The :focus-visible pseudo class provides a more elegant and effective way to achieve keyboard-only focus styles. Browsers now indicate focus only when it enhances the user experience, such as during keyboard interaction.

To use :focus-visible, replace :focus with :focus-visible in your CSS rules. This ensures that focus styles are visible only when activated by keyboard or non-pointing devices.

Backwards Compatibility

Browsers that do not support :focus-visible will show the default focus ring. To provide consistent user experience, Šime Vidas suggests defining focus styles in :focus and reverting them in :focus:not(:focus-visible).

CSS Example:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

HTML Example:

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

Notes:

• Use the tabindex attribute to make non-focusable elements focusable.
• Ensure your CSS is sufficiently specific to override default focus styles.
• Consider using :focus-within to style the parent element when its child is focused.

Conclusion

By leveraging the :focus-visible pseudo class or implementing the original solution, developers can provide keyboard-only focus styles without compromising the user experience for both keyboard and mouse users.

The above is the detailed content of How to Enable :focus Only on Keyboard Use (or Tab Press)?. For more information, please follow other related articles on the PHP Chinese website!