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

Question

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

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

Answer 1

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

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

其他资源：A11ycast focus-ring

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

if you want on click Tab (in keyboard)

button:focus{
outline:none;
}

Answer 3

This is a no go.

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

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

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