【问题标题】: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 删除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;
}

【讨论】:

  • 此方法删除轮廓直到重新加载
  • 现在你可以看到我的编辑了.. 根据需要设置 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”应该仍然有效。
猜你喜欢
  • 2019-03-28
  • 2019-04-23
  • 2021-01-05
  • 2021-01-23
  • 2012-10-03
  • 2021-07-09
  • 2013-02-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多