tabindex on the main tag
Hey, i sometimes see people applying
tabindex="-1" to the main tag on their sites, what does this achieve? Thanks in advance.14 Replies
can u give an example on someone using it?
sure thing, https://piccalil.li/
Piccalilli
Piccalilli - level up your front-end development skills
We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.
tabindex="-1" just makes it so you can't tab into the main section. its primarily used for accessibility reasons
sometimes it gets overused and on some tags its not necessary, however these days you can't be too careful with how verbose you tell the website what is and isn't tabable.
ah thank you. What are the accessibility reasons meaning you have to use that?
additionally, you can use it to make it easier to tab between elements (tabindex="0") that are interactive (buttons and links for example)
on the accessibility side, tabindex tells the computer what elements you can hit the "tab" key on your keyboard to focus on per click.
"-1" means "don't tab to this section"
"0" means "you can tab here"MDN Web Docs
tabindex - HTML: HyperText Markup Language | MDN
The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.
ahh i see, awesome, thank you.
no problem!
Linking back to my original question, why would the main section be something you wouldn't want to tab to? Is it so it doesn't put a focus on the section so it skips straight to it's content?
Its really about specificity and what a company wants to be focusable and in what order, so by turning off the main wrapper, then can make it more specific (like in your website's example) to the buttons in each cards instead of going in the sequence of Nav -> body -> each card -> footer.
i'm not totally sure why this company chose to add it to the
<main> tag though because that doesn't really do anything. In reality what is probably happening is that they have an underlying CMS that automatically adds attributes like that to different wrappers/themes for the website.ah that's understandable, thank you again for your help
yep no prob 😄
Its my personal opinion that tab-index should be used sparingly. Links, buttons, inputs , interactive elements get a tab-index by default. There is no need to add it unless you are stripping it away and making a custom element you want a keyboard user to be able to tab to in order to interact with. Even in those cases, there is ways to "hack" the elements so it is still able to be tabbed to with its native functionality and still have your custom styling. Many times labels associated with something like an input[type=checkbox] or input[type=radio] are used in this way.
but as a general rule of thumb you want to avoid or use tabindex very sparingly. It can create such a mess for keyboard users that they will just leave your site. There is really no reason your
<main></main> would need to set a tabindex of -1 as that is its default behaviour. A main element is not interactable natively.
here is some more information if youre interested https://www.a11y-collective.com/blog/tabindex-accessibility/The A11Y Collective
The Dos and Don'ts of Using Tabindex in Web Design
Struggling with tabindex in web design? Step up your UI/UX game and avoid common pitfalls with our guide on effective tab order.
i'll check that out, thanks