在包含输入元素的页面上启用通过链接的标签

Question

我想让用户通过页面的链接进行选项卡。

这是大多数浏览器中的默认行为，但只要页面包含input元素，它就会（取决于浏览器）成为页面上唯一的可列表元素，例如键盘无法访问a个元素。如果设置了tabindex，则不会更改。

请参阅以下示例。聚焦输入元素并按tab几次;虽然Chrome会关注这些链接，但Firefox和Safari会跳过这些元素。

<div>
  <form>
    <input type="text" tabindex="0">
     <button tabindex="0">send</button>
  </form>
</div>
<a href="#" tabindex="0">Link</a>
<a href="#" tabindex="0">Link</a>

如何在没有JavaScript的情况下实现跨浏览器的键盘导航并避免此问题？

Answer 1

我不认为你需要解决这个问题。

Apple以稍微不同的方式处理可访问性，并且必须启用用户首选项以允许链接之间的选项卡。这种行为在辅助功能社区中是众所周知的，我不建议实现任何自定义解决方案来修改此行为，因为它可能只会产生其他问题。

本文更详细地解释： http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/