DEV Community

Cover image for Need to set tabIndex=0 to enable tab navigation
Sung M. Kim
Sung M. Kim

Posted on • Originally published at slightedgecoder.com on

Need to set tabIndex=0 to enable tab navigation

Photo by Abigail Lynn on Unsplash

Note to self + Question

I recently answered a Stack Overflow question, React focus items list in child component after action from a different child component and learned that to enable HTML element navigation using tabs, you need to set tabindex values to 0.

I have researched for the question and replied.

What I still don’t get is why it’s not recommended to use tabindex value greater than 0.

Following articles urges you not use any values other than 0 & -1.

I’ve googled again and again but can’t find any satisfactory answers, yet.

At least I was able to answer the question and provided the Sandbox.

Used React.forwardRef for the first time and worked like a charm.

Question

Does anyone know why using tabindex value greater than 0 is not recommended?

Top comments (2)

Collapse
 
taylormsj profile image
Taylor Mitchell-St.Joseph

One thing comes to mind -
If you use a tabindex greater than 0 then you run the risk of disrupting the tab order.
Tabbing through the following example would navigate you from the first to the third back to the second, which in most cases isn't what you would want.

<input tabindex="1" />
<input tabindex="3" />
<input tabindex="2" />
Enter fullscreen mode Exit fullscreen mode

Keeping everything at 0 would ensure the order remains in a semantic order

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Thank you Taylor.
That makes sense.

How about when a site is responsive, and you need to have a different tab indexes (as layout can change)?

If tabindex is set to 0 everywhere, tabbing might jump around depending on the layout...