Enable tabbing through links, on page containing input elements

Question

I want to enable the user to tab through the links of a page.

This is the default behavior in most browsers, but as soon as the page contains an input element, it becomes (depending on the browser) the only tabbable element on the page, making e.g. a elements inaccessible by keyboard. This doesn't change if tabindex is set or not.

See the following example. Focus the input element and press tab a few times; While Chrome will focus the links, Firefox and Safari will skip those elements.

<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>

How can I achieve a cross-browser keyboard navigation without JavaScript and circumvent this problem?

Answer 1

I don't think that there is problem that you need to fix here.

Apple handles accessibility a little differently, and there are user preferences that must be enabled to allow for tabbing between links. This behavior is well known in the accessibility community, and I would not recommend implementing any custom solutions to modify this behavior, as it will likely only create other problems.

This article explains in more detail: http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/