具有href属性的Safari锚标签无法获得焦点?

时间:2018-03-22 17:22:11

标签: html css safari focus accessibility

我遇到了这个问题而且我认为我的代码错了,但在搜索并查看相关示例之后,我想知道Safari是否真的没有<a>标记href属性?

在我的用例中,我想使用<a href="#top">jump</a>跳到页面部分。为了使锚标签可以聚焦,我们需要像这样添加tabindex="0" - &gt; <a href="#top" tabindex="0">jump</a>。但是,似乎Safari的href属性不存在。请参阅此fiddle并尝试通过页面切换(从其他SO示例修改)。

HTML

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

CSS

a:focus { color: orange; }

有什么方法可以解决这个问题吗?相同的代码在Chrome中运行良好。

1 个答案:

答案 0 :(得分:2)

看起来这种行为是设计的,因此,作为网络开发人员,您可以做的事情并不多。最终,它取决于最终用户是否要启用这些设置。

我可以告诉你,屏幕阅读器用户经常使用Safari,特别是在iOS上。你可以在最新的WebAIM Screen Reader User Survey中看到这方面的证据。这些人似乎没有问题地导航技术,所以我怀疑这不是一个真正的问题。

技术经常发生变化,因此您可以做的最好的事情就是对规范进行编码,并为可能性较差的可访问性支持提供优雅的后备。不幸的是,在这种情况下,我认为没有办法做到这一点。

我不建议尝试实现变通方法(通过脚本),因为这可能只会导致更多问题。