【问题标题】：Tabindex, outlines only with tab buttonTabindex，仅使用选项卡按钮勾勒轮廓
【发布时间】：2018-05-22 10:35:32
【问题描述】：

我正在尝试修复我网站上的可访问性并使用标签按钮管理导航，我正在使用 tabindex。我注意到带有 tabindex 的元素在标签焦点和点击时都有一个轮廓。我会在单击（或拖动）时删除轮廓并将其保留在选项卡焦点上。

是否有解决方案（可能在 css 中）来解决这个问题？

【问题讨论】：

您想在点击时删除轮廓？
@goltornate 你想在点击选项卡时（在键盘中）轮廓仅在单击鼠标轮廓时保持不变？？？
完全是@לבנימלכה
@goltornate 所以看看我的回答
我发现以下答案有助于解决鼠标和键盘之间的 outline 问题（需要注意的是它是 JavaScript 解决方案，但您确实说过 'maybe' in css :)）：stackoverflow.com/a/46249645/638153跨度>

标签： css hyperlink accessibility tabindex

【解决方案1】：

目前，如果没有 JavaScript 检测键盘和鼠标焦点之间的差异，就没有简单的方法来实现这一点。但是，有一个名为:focus-visible（以前称为:focus-ring）的新CSS pusdo 类可以解决这个问题。它允许您为键盘用户设置焦点指示器的样式，而不适用于鼠标用户。

目前它是not supported in any browser，没有打开功能标志，但有一个polyfill available 可以让你使用它。

其他资源：A11ycast focus-ring

【讨论】：

浏览器对:focus-visible 的支持现在相当不错，主要支持 IE 11 和 Safari。

【解决方案2】：

此代码将删除outline 仅当您单击鼠标按钮时
使用mousedown 删除outline 和mouseup 支持它

<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="1">try me</button><br>
<br>
<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'"  tabindex="2">try me 2</button><br>

如果你想点击 Tab（在键盘上）

button:focus{
outline:none;
}

【讨论】：

此方法删除轮廓直到重新加载
现在你可以看到我的编辑了.. 根据需要设置 outlineColor
我建议不要使用outline:none将颜色设置为轮廓
对我不起作用。如果我点击按钮，我会看到焦点轮廓。那挺好的。当我用鼠标单击按钮时，轮廓消失了。这也很好。但是，如果我现在再次点击按钮，大纲就消失了。这很糟糕。
@slugolicious 立即查看

【解决方案3】：

这是不行的。

当您使用鼠标单击元素时，您将同时移动定点设备焦点和keyboard focus。

WCAG 要求keyboard focus indicator be always visible on any keyboard operable element（无论它是如何移动的）。通过设置tabindex，您可以使其键盘可操作，因此您必须遵守此规则，即使该元素之前已被鼠标激活，导致键盘焦点移动到那里。

此外，许多辅助技术可以在不使用 Tab 键的情况下聚焦元素（例如，语音识别软件、眼动追踪设备、某些屏幕阅读器）。

【讨论】：

只要 ":focus" 样式有效，您应该可以使用 wcag 2.4.7。 wcag 下不需要鼠标焦点。我认为 OP 只是试图删除鼠标焦点并单独留下键盘焦点。使用语音识别（例如，dragon），“:focus”应该仍然有效。