如何启用：仅关注键盘使用（或按 Tab 键）？

仅在键盘使用（或按 Tab 键）时启用 :focus

概述

在不需要时禁用 :focus 可以通过消除来增强用户体验令人困惑的视觉线索。然而，为键盘用户维护焦点功能至关重要。

原始解决方案：仅键盘焦点样式

Roman Komarov 的解决方案利用 CSS 和 HTML 来实现仅键盘焦点样式。它将可聚焦元素封装在容器元素中，并仅对内部元素设置样式，使键盘用户可以直观地访问焦点状态。

改进的解决方案：:focus-visible 伪类

更新: :focus-visible 伪类提供了一种更优雅、更有效的方法来实现仅键盘焦点样式。 浏览器现在仅在增强用户体验时才指示焦点，例如在键盘交互期间。

要使用 :focus-visible，请在 CSS 规则中将 :focus 替换为 :focus-visible。这可确保焦点样式仅在通过键盘或非指点设备激活时可见。

向后兼容性

不支持 :focus-visible 的浏览器将显示默认焦点环。为了提供一致的用户体验，Šime Vidas 建议在 :focus 中定义焦点样式并在 :focus:not(:focus-visible) 中恢复它们。

CSS 示例：

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

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

HTML 示例:

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

注释：

• 使用 tabindex 属性使不可聚焦的元素可聚焦。
• 确保您的 CSS 足够具体以覆盖默认的焦点样式.
• 考虑使用 :focus-within 在子元素获得焦点时设置父元素的样式。

结论

通过利用 :focus-visible 伪类或实现原始解决方案后，开发人员可以提供仅键盘焦点样式，而不会影响键盘和鼠标用户的用户体验。

以上是如何启用：仅关注键盘使用（或按 Tab 键）？的详细内容。更多信息请关注PHP中文网其他相关文章！