DEV Community

loading...
Cover image for Need to set tabIndex=0 to enable tab navigation

Need to set tabIndex=0 to enable tab navigation

dance2die profile image Sung M. Kim Originally published at slightedgecoder.com on ・1 min read

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?

Discussion (2)

pic
Editor guide
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" />

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

Collapse
dance2die profile image
Sung M. Kim Author • 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...