The attribute 'tabindex' is used to designate items that a keyboard-only user can tab to in order to navigate a webpage. The 'tabindex' can also determine the navigation order of the items.

By default, links can be reached using the tab key, but some times a 'tabindex' is used for items that don't generate an automatic tab. It is also used to reorder the tabbing of links, for instance if the design style or layout of the links creates a problem with the natural tab order.

Using tabindex = "0" causes the tab order to follow its natural flow; the HTML structure of the page. Using positive number for the tabindex can cause problems if you do not carefully consider the flow of the page and every single item that a user can tab to.

For instance, if you set a button link near the top of the page and set its tabindex = "1", you might think that is fine. However, if the logo on the page also contains a link, then the first link the keyboard user will reach will be the button on the page, and then when they click tab, it will take them backwards to the logo area, instead of their expected destination, to something lower on the page.

As a best practice, avoid using tabindex where possible. If you have an item that can't be tabbed to, but needs to be accessed, use tabindex="0". Don't use tabindex="1" or higher, unless you have very good reason, and unless you take into account every item that can be tabbed to on the entire webpage. And you will also have to consider future page additions you may make and check the tab order every time you add new content that can be tabbed to.

Did this answer your question?