在包含输入元素的页面上通过链接启用选项卡

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/