Tabindex,仅使用选项卡按钮进行概述?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (87)

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

是否有解决方案(可能在css中)来解决这个问题?

提问于
用户回答回答于

通过设置tabindex,你可以使键盘可操作,因此你必须遵守此规则,即使先前已使用鼠标激活了元素,也会导致键盘焦点移动到那里。

此外,许多辅助技术可以在不使用Tab键的情况下聚焦元素(例如,语音识别软件,眼睛跟踪设备,一些屏幕阅读器)。

用户回答回答于

此代码将删除outline 只有当你点击按钮,鼠标 使用mousedown删除outlinemouseup支持它

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

扫码关注云+社区

领取腾讯云代金券