Firefox 不允许使用角色按钮聚焦锚标记答案

【问题标题】：Firefox does not allow to focus anchor tag with role buttonFirefox 不允许使用角色按钮聚焦锚标记
【发布时间】：2020-10-01 00:27:12
【问题描述】：

在 Firefox 中，如果我指定 <a role="button" tabindex="0">Something</a>，我无法找到如何通过 Tab 使该元素成为焦点。

在 Safari/Chrome 中，它按预期工作。但在 Firefox 中，除非我将其更改为 <div role="button" tabindex="0">Something</div>，否则它不起作用。

当我查看辅助工具时，我可以看到在这两种情况下，角色都是pushbutton，但 Firefox 完全忽略了<a>。这是 Firefox 中的错误还是我遗漏了什么？

我在 Mac OS 上，所以我知道这取决于设置，但如果 Safari 能够聚焦给定元素，为什么 Firefox 不能？

【问题讨论】：

我在 Safari 和 Chrome 中找到了这个示例 w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/…，它的行为相同（我可以关注切换按钮和最后一个按钮），但在 Firefox 中我只能关注切换按钮。
@Jack 没有帮助，因为我的问题是，为什么 firefox 会忽略 role="button" tabindex="0"。看起来它严格忽略了<a>，即使我特别说它是一个按钮。
好的，只是想确认一下

标签： html firefox browser accessibility user-experience

【解决方案1】：

简答

如果这是一个按钮，请使用 <button> 元素，除非您需要 JavaScript 后备，在这种情况下使用 href 属性使您的超链接有效。

更长的答案

无法复制此问题，但可能是 Mac OS + Firefox 问题（因为我在 Windows 上，并且给定的示例在 Firefox 中按预期工作。）

我认为这不起作用的唯一原因是您的 HTML 在语义上不正确，您没有创建有效的超链接。

超链接必须具有有效的href 属性。如果没有这个，它将不会注册为超链接。

如果您不打算将此作为超链接（鉴于您已将 role="button" 提供给它的事实告诉我您不打算将此作为超链接），那么为什么不使用 <button> 元素.

这是使用语义正确的元素，语义是可访问性的关键。

如果您打算将此作为超链接（这样做的唯一原因是为没有 JavaScript 提供后备），那么您需要添加您的 href="link" 以使其成为有效的超链接。

你不需要tabindex="0"，因为锚标签默认是可聚焦的（只要它们是有效的）。

【讨论】：

谢谢。是的，在 Windows 上这很好，一切都是可选项卡，在 Mac OS 上，我们需要更改操作系统设置。问题是为什么 Firefox 不遵循role 中提供的信息？
除 Firefox 之外的所有浏览器都遵循 role 并相应地采取行动。我知道它只是忽略了 a 元素，但为什么即使是 safari 也可以正常聚焦 a[role="button"] 而 firefox 不能？
我认为归结为浏览器供应商必须开发两种不同的代码库。由于 Firefox 由志愿者（部分）维护，可能有人在 Windows 中修复了该问题，但没有在 Mac OS 中修复它的开发技能，这被忽略了。很难说它为什么存在。我无法检查的真正问题是，如果您使超链接有效，它是否可以正常工作，您是否有机会测试将href 添加到您的锚点？它类似于仅在 Mac OS 版本的浏览器上出现的奇怪 JavaScript 行为。
是的，我尝试提供有效的href 属性但没有更改。在 Safari 上，您可以使用 Option + Tab 标记所有内容，但 Firefox 甚至会忽略这一点。所以我认为 Firefox 严格遵循操作系统设置并完全忽略锚点，即使它们有 role="button" 或者是有效链接。
对不起，我对你所说的感到困惑，什么操作系统设置？按Tab 可以访问传统的超链接，即<a href="https://google.com">test</a>（没有role，没有tabindex）？如果你不能，那么问题不在于上述任何一个，问题很可能是焦点指示器没有显示。无论是那个，还是您在 Firefox 中有一些干扰的插件，我建议在“新私人窗口”中运行测试以消除插件是原因，并在没有任何样式表的情况下运行测试。让我知道这是否有效。

【解决方案2】：

默认情况下，带有 OS X a 元素的 Firefox 不可通过选项卡访问，无论有无 tabindex。

在 Firefox 中可以通过两种方式使用键盘访问 a 元素。

按住选项键的同时按 Tab 键
更改您的系统首选项。在您的键盘首选项中提供“完全键盘访问”，将该选项切换为“所有控件”

参考：https://www.alexlande.com/articles/cross-browser-tabindex-woes/

请阅读上面的文章，它详细介绍了跨浏览器键盘可访问性问题。

【讨论】：