This page is an example of how using tabindex can result in confusing keyboard navigation.
What should happen is you go to all the focusable elements, like links and checkboxes. Instead, you’ll go to headings, the wrong order of checkboxes, and one out of two links.
Select the tab key until you get to the first heading. Then, use the tab key to navigate.
You can see the code for this at the bottom of the page.
Checkbox list (with tabindex of 1)
Paragraph with links (with tabindex of 5)
I should be able to tab to this MDN tabindex article link, but I can’t because it has a negative tab index.
I am able to tab to this MDN tabindex article link. It has a tabindex of 6.
Code for example above
<h2 tabindex="1">Checkbox list (with tabindex of 1)</h2>
<p>
<input type="checkbox" tabindex="2">
<label>1 - This label is focused first when the tab key is pressed because its tabindex is 2.</label>
</p>
<p>
<input type="checkbox" tabindex="4">
<label>4 - this label is the last to focus because the tabindex is 4</label>
</p>
<p>
<input type="checkbox" tabindex="3">
<label>2 - and this focuses second because the tabindex is 3.</label>
</p>
<p>
<input type="checkbox" tabindex="3">
<label>3 - this focuses as third because it comes next in the DOM order with the same tab index as the checkbox above.</label>
</p>
<h2 tabindex="5">Paragraph with links (with tabindex of 5)</h2>
<p>I should be able to tab to this <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex" tabindex="-1">MDN tabindex article link</a>, but I can't because it has a negative tab index.</p>
<p>I am able to tab to this <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex" tabindex="6">MDN tabindex article link</a>. It has a tabindex of 6.</p>