Firefox：使用 tab 键聚焦链接内的元素答案

【问题标题】：Firefox: Focus an element inside a link using the tab keyFirefox：使用 tab 键聚焦链接内的元素
【发布时间】：2019-03-13 12:14:13
【问题描述】：

我在 a 标签中有一个按钮，应该可以通过 tab 键获得焦点。

<a href="#">
    <button tabindex="0">Do something</button>
</a>

使用 Firefox 属性 accessibility.tabfocus = 7，我只能关注包装链接，而不能关注子按钮。有没有办法改变这种行为？

【问题讨论】：

我认为你应该下定决心：使用按钮（做某事）或使用链接（导航某处）。您不应该将两者结合起来，因为屏幕阅读器应该如何宣布这个 UI 元素？作为按钮还是作为链接？
@ChristopheStrobbe 我现在使用 role="button" 属性将链接变成了一个按钮。现在您可以看到焦点轮廓。奇怪的是，使用这种配置（accessibility.tabfocus = 7），我注意到 FF 通常没有显示按钮的焦点。
但是为什么你会误用链接作为按钮呢？有什么理由没有真正的按钮<button type="button">..</button>？
该链接用于滚动到跳转标记（'#section-example'），一旦被点击。
我真的不明白你为什么将role=button 添加到用于导航某处的链接中。这会导致链接被宣布为按钮，从而误导屏幕阅读器用户他们正在处理的 UI 组件。焦点可见性应该用 CSS 来定义，而不是滥用 ARIA 角色。

【解决方案1】：

即使你可以让它工作，它也是不是有效的 HTML，因此很容易在任何浏览器上中断，或者，如果它恰好现在工作，它可能会在未来中断。

<a> 规范说：

内容模型： 透明，但必须有无交互内容或元素后代。

因为代码不是有效的 HTML，它会失败WCAG 4.1.1。

成功标准 4.1.1 解析：在使用标记语言实现的内容中，元素具有完整的开始和结束标记，元素根据其规范嵌套，元素没有包含重复的属性，并且任何 ID 都是唯一的，除非规范允许这些功能。

【讨论】：