这是不行的。

Question

我尝试修复网站上的辅助功能并使用标签按钮管理导航，我使用tabindex。我注意到带有tabindex的元素在制表焦点和单击时都有一个轮廓。我会删除点击（或拖动）的轮廓并将其留在标签焦点上。

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

Answer 1

目前没有简单的方法可以实现这一目标，而无需JavaScript检测焦点在键盘和鼠标之间的差异。但是，有一个名为:focus-visible的新的pusedo-class（以前称为:focus-ring）可以解决这个问题。它允许您为键盘用户设置焦点指示器的样式，同时不将其应用于鼠标用户。

目前not supported in any browser没有打开功能标记，但有polyfill available允许您使用它。

其他资源：A11ycast focus-ring

Answer 2

当您点击鼠标按钮时，此代码将仅删除outline 使用mousedown删除outline，mouseup删除

＆＃13;

<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>

＆＃13;

＆＃13;
如果您需要点击标签（键盘上）

button:focus{
outline:none;
}

Answer 3

这是不行的。

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

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

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

Tabindex，仅使用制表符按钮进行概述

3 个答案:

这是不行的。