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

5 1

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?

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

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...

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up