javascript - 仅实现键盘:focus styling in 2021?的最佳方法是什么

Question

长期以来，通过 CSS 删除轮廓是很常见的做法 outline: none;来自按钮等可交互元素，因为大多数时候它看起来与品牌无关，但它阻碍了可访问性，并使依赖键盘导航的残疾人更难导航网站。
问题是我还没有找到一种简单的方法来区分鼠标/键盘之间的焦点事件源，并且单击以及键盘选项卡元素将触发焦点状态。
我知道这个问题一直是 hot topic ，但大多数来源都有几年的历史了，所以我将展示我发现的关于如何实现仅键盘焦点的主要 4 种方法，每种方法都有其优缺点:

“作弊”方法，一些网站如 Target.com 的悬停和聚焦风格相同，这种设计选择让他们可以选择根本不需要移除焦点轮廓。

优点:绕过问题。
缺点:设计选择有限。

button {
  width: 180px;
  height: 60px;
  background: #999;
  border: none;
}

button:focus,
button:hover { 
  outline: 5px solid green; 
}

<button>Click or Tab me!</button>

JS解决方案，Apple.com等网站使用ally.js添加data-focus-method它们的可交互元素的属性。 what-input与其他 polyfills 一起，也很有名并且做得很好.

优点:无论设计如何，都可以在所有浏览器中正确执行功能。
缺点:需要额外的 http 请求来获取 .js 文件，与其他解决方案相比，JS 对性能的要求更高。

ally.style.focusSource().current()

button {
  width: 180px;
  height: 60px;
  background: #999;
  border: none;
  outline: none;
}

html[data-focus-source="key"] button:focus {
  outline: 5px solid green;
}

<button>Click or Tab me!</button>
<script src="https://cdn.jsdelivr.net/ally.js/1.4.1/ally.min.js"></script>

:focus-within优雅解决方案的 chalice 。 :focus-visible基本上是 :focus 的纯键盘版本并已在 most modern browsers 上慢慢提供(以前的 :focus-ring )。

优点: CSS 解决方案，易于性能，易于实现。
缺点:浏览器支持更好，但在 Safari 尚未加入的情况下仍然不理想。
编辑::focus-visible已启用BY DEFAULT作者:Safari 截至 2022 年 3 月 14 日

button {
  width: 180px;
  height: 60px;
  background: #999;
  border: none;
  outline: none;
}

button:focus-visible {
  outline: 5px solid green;
}

<button>Click or Tab me!</button>

Roman Komarov tabindex="-1" hack 表明我们可以通过添加 span 来区分焦点样式。在我们的button元素(技术上有效的 HTML)然后给出该跨度 tabindex="-1"和不同的焦点造型。

优点:不涉及 JS，似乎在所有浏览器中都能正常工作。
缺点:需要在网站上的所有按钮和链接内发送垃圾邮件，需要将填充从按钮/链接移动到内部跨度，需要调整各种跟踪标签，例如 gtm。

button {
  width: 180px;
  height: 60px;
  background: #999;
  border: none;
  outline: none;
}

button > span {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}

button:focus {
  outline: 0;
}

button:focus > span {
  outline: 5px solid green;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

<button>
  <span tabindex="-1">Click or Tab me!</span>
</button>

现在的问题是，是否有更好或更简单的方法来实现此功能？是否有我缺少的行业标准？

Answer 1

现在的问题是，是否有更好或更简单的方法来实现此功能？是否有我缺少的行业标准？
简短的回答:不，如果您的目标是“完美”(它在所有浏览器中的工作原理完全相同)，您基本上已经在此处列出了您的选项。
但是，正如您所说，所有 4 个选项都有缺点。
就我个人而言，我会选择一个“最合适”的解决方案，其中一些用户最终可能会在点击时获得焦点指示器，但大多数新浏览器会优雅地处理事情:

button:focus { 
outline: 3px solid #333;
outline-offset: 3px;
 }
button:focus:not(:focus-visible) {
    outline: none;
    outline-offset: 0;
}

<button>A test</button>
<button>Another test</button>

这个解决方案的缺点？
Safari 仍会在单击时显示焦点指示器……没关系!
Safari 最终会 catch 并使用 :focus-visible .在此之前，上述 fiddle 是确保支持 :focus-visible 的浏览器的最简单方法。行为与预期一样，不支持它的浏览器会退回到在点击时提供焦点指示器。
但它必须是完美的
然后我将只使用基于支持有条件加载的 polyfill。
This answer details how to detect support for :focus-visible
此时您可以有条件地加载 a :focus-visible polyfill (压缩后为 3.5kb)。
我个人不喜欢这种解决方案，因为您必须更改所有 CSS ......但我并不像大多数人那样被点击时显示的焦点指示器所困扰，所以我可能有偏见!