tab keypress ignoring unvoluntarily some tabindex elements in page html

Question

I'm working on a homepage where I have element wrapper's with background imgs, with inside cta's. Every wrapper and cta has its own tabindex (there is about 400 tabindexs in the hp) and they are all in order.

The weird thing is that when I navigate with TAB, even tho the tabindexs are in the right order, is first navigating all the div wrappers and then after it gets to to the footer gets back up the page to navigate the ctas.

The cta's are <div><objects><a tabindex="x"></object></div>, the wrappers are <div><a tabindex="x"><picture></a></div>

The issue I'm having is that every information I found is about making browsers ignore tabindex, I need the opposite information

Answer 1

You don't need to set tabindex on the <a>. The browser will go through focusable elements like the <a> by itself in order of the elements in the DOM. Adding a tabindex should only be done if you need to change the default behavior. It is generally discouraged to use tabindex values other than 0 and -1.

If you want the wrappers to be keyboard focusable as well, then add tabindex="0" to them. tabindex="0" will make the element keyboard focusable (if it isn't already like a div) in sequential DOM order (just like the <a>).

I don't completely understand your pseudo code but I assume the CTA is inside the focusable wrapper. In that case the following sample code will let you tab in this order: wrapper 1, link 1, wrapper 2, link 2, etc.

<div tabindex="0">
  <p>Content</p>
  <a href="#">Link</a>
</div>
<div tabindex="0">
  <p>Content</p>
  <a href="https://google.com">Link</a>
</div>

Two additional notes if you or other readers don't get the expected results:

1. To be keyboard focusable <a> tags need to have an href so they're interactive, otherwise they'll be skipped.
2. On macOS you need to turn on keyboard focusing otherwise links won't be focused. Note that the settings are different for each browser.