tabindex not behaving as expected. What am I doing wrong?

Question

I would not normally mess with tab order but I have a map application using LeafletJS and don't want a keyboard-only user to have to tab through well over a hundred marker pins with tabindex="0" before they get to the Legend button that will show them what the marker pins mean and allow them to filter by category.

MDN says, "A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source."

I therefore set tabindex="1" on the button and tabindex="2" on the checkboxes.

However, in Firefox, Chrome, Opera and Edge on Windows 10, you tab through all the marker pins, various browser controls and only then return to the button with tabindex="1" and the checkboxes with tabindex="2" and a link with tabindex="3"

You can see a demo of the map here https://codepen.io/PeterNotInPT/pen/eYXdxdP but I can reproduce the issue in much simpler form below and also on Codepen at https://codepen.io/PeterNotInPT/pen/LYvbjxP

<a href="#">Link where tabindex is NOT set</a><br><br>
<button tabindex="0">Button with tabindex: 0</button><br><br>
<a href="#" tabindex="3">Link with tabindex: 3</a><br><br>
<button tabindex="1">Button with tabindex: 1</button><br><br>
<a href="#" tabindex="4">Link with tabindex: 4</a><br><br>
<input type="checkbox" id="chkbox" tabindex="2" value="abc"><label for="chkbox">Label for checkbox with tabindex: 2</input>

In theory, the focus should jump first to the button with tabindex="1", the checkbox with tabindex="2" and the two links with tabindex="3" and tabindex="4" and then to the tabindex="0" elements (either set or default) but in practice it does the link with no tabindex set, the button with tabindex="0", the browser controls and only then goes to the button with tabindex="1", the element with tabindex="2" and so on.

What am I not understanding? Or is there something weird on my computer and it works as expected for you?

Answer 1

What you observe is perfectly normal. In fact, it's a well known behavior:

1. Elements without tabindex or with tabindex=0 are focused in DOM order
2. And then elements with tabindex>=1 are focused in tabindex order, or in DOM order for tabindex with identical values

This is the big problem of tabindex. If you specify a single value different than -1 or 0 anywhere, then you must specify a tabindex to all focusable elements of the page, so to make sure that the focus order stays consistent everywhere.

It's very difficult to manage a consistent focus order at all times when you have to specify a tabindex everywhere, especially when the content dynamically changes. That's a maintenance nightmare.

That's why using any tabindex value different than -1 or 0, although valid, is usually strongly discouraged.

In your case, instead of using tabindex>=1, it would be much better to rearrange your elements.

As a reminder, values 0 and -1 are special:

• Value 0 makes an element focusable in DOM order, even if it is normally not.
• Value -1 makes the element non-focusable, although it should normally be. The element can only take focus programatically.