具有 href 属性的 Safari 锚标记没有获得焦点？

Question

我遇到了这个问题，我认为我的代码是错误的，但是在搜索并查看了相关示例之后，我想知道 Safari 是否真的不关注带有href 属性的<a> 标签？

在我的用例中，我想使用<a href="#top">jump</a> 跳到页面部分。为了使锚标记具有焦点，我们需要像这样添加tabindex="0" -> <a href="#top" tabindex="0">jump</a>。但是，似乎 href 属性的存在不适用于 Safari。请参阅此fiddle 并尝试通过页面切换（从其他 SO 示例修改）。

HTML

<a tabindex="0">Test 1</a>
<a href="#" tabindex="0">Test 2</a>

CSS

a:focus { color: orange; }

有没有办法解决这个问题？相同的代码在 Chrome 中运行良好。

Answer 1

这种行为似乎是设计使然，因此作为 Web 开发人员，您对此无能为力。最终，是否要启用这些设置取决于最终用户。

我可以告诉你，屏幕阅读器用户经常使用 Safari，尤其是在 iOS 上。您可以在最新的WebAIM Screen Reader User Survey 中看到这方面的证据。这些人似乎可以毫无问题地驾驭这项技术，所以我怀疑这并不是真正的问题。

技术经常变化，因此您能做的最好的事情就是按照规范进行编码，并在可能的情况下为较差的可访问性支持提供优雅的回退。不幸的是，在这种情况下，我没有看到任何方法。

我不建议尝试实施变通办法（通过脚本），因为这可能只会导致更多问题。