At work, part of my job has been to research ways to improve accessibility on our websites. I volunteered to do this, as I wanted to learn more about best practices and make the web more friendly to all. I quickly found that web accessibility (or a11y - titled that way since there are 11 characters between the a and y) is something that is not very easy to learn. There are plenty of resources, but often there is no "right way" of doing something. Some resources say one thing, others say something else. Additionally, there is no single accessibility resource, it takes a lot of research and time to go through everything. With this blog series I aim to compile a swath of easy a11y wins that you can start to implement immediately and won't take much time out of your day.
Now, tabindex. I think that any web developer hates this property by default. Digging through a bunch of code to find out what number to throw in here is obnoxious, and sometimes, almost impossible! At work, it was just assumed that tabindex was a necessary evil. Something that we would have to maintain forever so that keyboard users wouldn't be left in the dark.
As it turns out, manually setting tabindex to anything above 0 is bad for a11y, and annoying to do! It can easily result in the cursor jumping to unexpected places, and is so hard to maintain that it really does not make any sense to bother with. The browser does an infinitely better job than we ever could at this!
My only question about this piece of information was "then why would you set tabindex on anything?" The answer is that setting a tabindex of 0 will notify browsers that an element that isn't normally given a tabindex should be given a tabindex, allowing keyboard users to focus that element. In other words, use tabindex only when you are creating a component which needs to be able to be used by keyboard users but does not have the ability by default. For example, I used this when I built a custom select dropdown with an unordered list element.
You can use a tabindex of <0, to remove an item from the tab order entirely. Use this sparsely, as you're breaking the intended function of an element, which can quite easily cause confusion and result in bad user experience. Additionally, hiding an element with CSS will remove it by the tab order automatically, so it only applies to visible, unusable elements (which are confusing!). Be careful.
Thanks for reading, I hope that you learned something new!
Top comments (1)
Didn't know about the removal aspect, thanks!