I want to 100% understand this properly. Let’s go.

I know there’s a tabindex attribute, but haven’t used it. Mostly because I am aware that you should be careful with it, and have heard a lot over the years about it’s misuse. And also because I haven’t really needed or wanted to change the default tab order. The MDN page for tabindex jumps right in as a reference, and I can tell there’s something else I need to read up on first.

Yes! Here it is. Léonie Watson has written about Using the tabindex attribute which explains nicely how keyboard interaction works.

Interactive HTML elements

Right, these are focusable by default. Which are they again? The most relevant for me to think about right now are: <a>, <button>, <input>, <label>, <select>, <textarea>.

<input type="hidden"> is not focusable — but all the others like <input type="text">, <input type="checkbox">, <input type="radio"> and so on.

Oh, and also <details> 💕 which btw is the coolest HTML element I had never heard about until recently. But with a bright future: the Details disclosure element.

Tabindex and styling focus

No need for tabindex on elements that are focusable by default. But for elements that are not interactive, setting the attribute with a value 0 will add it to the tab order.

A user can focus on <div tabindex=0> and I can style it with the :focus pseudo-class. This element will now also inherit focus styles from the user agent stylesheet.

tabindex negative 👌

Setting an element to tabindex=-1 or an other negative integer, makes it programatically focusable, but not included in the tab order. A user can’t reach it, but scripting can.

tabindex positive 🚫

Nope. Don‘t do this. Fix your markup instead.

---

That’s it. Why did I think there was more here I didn’t already know?! 🤔