小编Cud*_*ead的帖子

长期以来，通过 CSS 从按钮等可交互元素中删除轮廓一直是常见的做法outline: none;，因为大多数时候它看起来不符合品牌，但它阻碍了可访问性，并使依赖键盘导航的残障人士更难浏览网站。

问题是我还没有找到一种简单的方法来区分鼠标/键盘之间的焦点事件源，并且单击以及键盘选项卡元素将触发焦点状态。

我知道这个问题一直是一个热门话题，但大多数来源都有好几年了，所以我将展示我发现的关于如何实现仅键盘焦点的 4 种主要方法，每种方法都有自己的优缺点：

1. “作弊”方法，一些网站（例如 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>

2. JS 解决方案，Apple.com 等网站使用ally.jsdata-focus-method向其可交互元素添加属性。What-input也很出名，并且与其他各种Polyfill一起做得很好。

优点：在所有浏览器上都能正常运行，无论设计如何，都可以实现。

缺点：需要额外的 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 { …