0

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?

Appleshell
  • 7,088
  • 6
  • 47
  • 96
  • Are the problems you're describing all occuring on a Mac? – Josh Apr 11 '18 at 16:46
  • @Josh Yes, I haven't checked the behavior on different OS's. – Appleshell Apr 11 '18 at 17:07
  • 1
    As Josh says below, it's a known behavior of Safari. Not sure why Apple chose to do that. You just have to change the setting in Safari and the Keyboard settings. It's the first thing I do when I get a new Mac. Frustrating. – slugolicious Apr 12 '18 at 01:26

1 Answers1

5

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/

Josh
  • 3,872
  • 1
  • 12
  • 13