I'm making one of these e-merce menus and I need it to fully keyboard-accessible. For that I need to interrupt the natural tabindex order but I'm not sure what the best approach here is. I figured I have 3 options

• set the tabindex of everything I want to ignore to -1 (while I want to ignore it)
• Set the tabindex of the next item I want to focus to 1 (which did not work)
• Focus the next element I want to focus by using the .focus() method (this would mean a lot of edge cases to handle)

I've added a sketch of what I want to achieve below, the top box is the normal menu with each of the links opening its own sub-menu (like for example on zalando)

Is there a simple approach to handle this scenario? I read the wai-aria pattern and am aware of all the roles and labels I need to assign, it's just the focus that's giving me trouble.

I'm making one of these e-merce menus and I need it to fully keyboard-accessible. For that I need to interrupt the natural tabindex order but I'm not sure what the best approach here is. I figured I have 3 options

• set the tabindex of everything I want to ignore to -1 (while I want to ignore it)
• Set the tabindex of the next item I want to focus to 1 (which did not work)
• Focus the next element I want to focus by using the .focus() method (this would mean a lot of edge cases to handle)

I've added a sketch of what I want to achieve below, the top box is the normal menu with each of the links opening its own sub-menu (like for example on zalando)

Is there a simple approach to handle this scenario? I read the wai-aria pattern and am aware of all the roles and labels I need to assign, it's just the focus that's giving me trouble.

• javascript
• html
• reactjs
• accessibility

• Guess setting the tabindex with the first option would be fine – keikai Commented Feb 4, 2020 at 8:31
• 1 Just setting them to one is not enough set tab to 1, 2 , 3 in the order you want them to behave. – Grumpy Commented Feb 4, 2020 at 9:13

3 Answers 3

As a rule of thumb, don't use positive tab indexes. At all. If you want to be able to tab to something, just give the tabindex a value of zero, and use the markup order to dictate the sequence.

Negative tabindexes should only be used if you need to focus a non-interactive element. (Hyperlinks are interactive, so that's out).

Generally speaking, if you are navigating between hyperlinks, you should not mess with tabindex at all. Hyperlinks are already keyboard-focusable. Please don't put tabindex attributes on <a>, <button>, or <input> elements. They are already part of the tab sequence.

If you have good reason to jump about in the sequence, there is an aria-flowto attribute which is intended for this purpose, but it is poorly supported, and inpletely specified. You might want to try it out, though. If sub nav link 1 has the id subnavlink1 you would mark up link 1 like this:

<a href="whatever.html" aria-flowto="subnavlink1">Link 1</a>

This might work on some browsers, but I notice it doesn't work on Chrome, even though the Accessibility Tab in developer tools recognises its presence.

For more reliable deviation from the markup order tab sequence, listen for the focusout or blur event, on the element you are 'leaving' and use that event handler to focus on some other element. These events are very similar, both allowing you to redirect the tab sequence. They fire before the next element gets focus, so you can focus where you like. You may need to preventDefault or return false

Basic pattern might be something like this:

var lnk = document.querySelector("nav > a:nth-child(1)");
var snl = document.querySelector("#subnav > a:nth-child(1)");

lnk.addEventListener("focusout", function () {
    snl.focus();
});

You should (of course) soft-code the nav indexes in the selector string, so that you can use the same trick on all the links if necessary.

Zalando's menu is a mess and what you are trying to achieve emulating them is not accessible I am afraid. It is not expected behaviour to tab into the sub menu and then navigate with just the up and down arrows (adding left and right arrows would help a bit). Anyone using a screen reader is likely to get lost / confused.

See this W3C example where they have a top level link and then next to a down arrow that can be activated pressing enter to reveal a sub menu.

For mobile you can then turn them into one menu item per line and make the down arrow a lot larger (at least 48px by 48px) and it works there too.

That example is an accessible pattern, with a logical tab order, without needing to resort to tabindex which you should avoid at all costs.

By far the best solution I found to this was to keep the natural tab order as much as possible and then position the subnav via css. This could look something like that

<nav>
  <Tab tabindex='0' >link 1</Tab>
  <Tab tabindex='-1'>link 2</Tab>
  <Tab tabindex='-1'>link 3</Tab>
  <Subnav>
   ...
  </Subnav>
  <Searchbar />
<nav>

the tabindex is -1 on the other tabs so they get skipped when pressing tab. To get to them they need to be focused programmatically (for example when the user presses the right arrow button go to the right tab)

Here's an example of this in react using the reach-ui tabs ponent https://codesandbox.io/s/reach-tabs-test-u05vq