In this Article
What is the tabindex attribute?
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 sometimes 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.
tabindex lets web authors "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." mdn web docs on tab index
Possible tabindex Values
The attribute takes an integer as its value, with different results, as described below:
tabindex="-1"(any negative value, usually -1) means the element cannot be reached via sequential keyboard navigation.tabindex="0"means an element should be reachable via sequential keyboard navigation, after any positive values. More than onetabindex="0"results in the order being defined by their natural order in the document sourcetabindex="1"(any positive integer) means the element should be focusable, with its order defined by the given positive number.If
tabindexis included as an attribute with no value, the user agent determines if the element is focusable.
Why positive tabindex can be problematic
Using a positive number for the tabindex can cause problems if you do not carefully consider the page's flow and every 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.
Best Practices with tabindex
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.
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!