<button tabindex="">
- Attribute of
- Creating A Button With The HTML Button Element: Here's How
- What does
<button tabindex="">do? - Determines the order of selection when the tab key is used.
Contents
Code Example
<a href="https://en.wikipedia.org/wiki/Flamingo" tabindex="2">Wikipedia entry on Flamingos</a>
<a href="http://www.livescience.com/27322-flamingos.html" tabindex="1">Flamingo Facts</a>
<a href="http://www.flamingos-world.com/" tabindex="4">Flamingos World</a>
<a href="https://www.caesars.com/flamingo-las-vegas" tabindex="3">Flamingo Hotel, Las Vegas</a>Using the Tab key
If you navigate the web using a keyboard, rather than your mouse, you will be familiar with the action of the tab key. It is used to move between form fields and links on a webpage so that it can be selected using Enter. (In some cases, you may need to change your settings to activate this behavior.)
As you tab through the links on this page, you will notice that a border appears around the selected link, and drop-down menus open as you tab through them. In this example, we have selected the link for Dinosauria using the tab key.
Hitting the Enter key would then open the selected link.
Changing the Default Order
The default behavior of the tab key is to skip from link to link in the order the links appear in the HTML document. This isn’t always the most logical order in terms of usability, so the tabindex attribute lets you set a different order.
There are other ways to achieve the same result, such as shuffling the order of the buttons within the code, or using CSS to mimic the same functionality. Since tabindex is not a completely failsafe option, you may want to consider these methods before using it.
Special Usage
In most cases, the value of tabindex will be a positive integer. Note the following exceptions:
- A negative value will cause the link to be skipped as the user tabs through the page. This is helpful where you want something to be available to an automated action from a script, but you don’t want the user to be able to select it. Be sure to consider accessibility consequences when using this option.
- A value of 0 (zero) allows you to force any element to be part of the tabbed sequence on a page. The browser will use the default order. Bear in mind that many elements will not respond to the Enter key without additional code.
It is possible, although not advisable, to use the same value for more than one link on the page. If this happens, the browser will assign the first position to the element that is higher in the document.
Changes in HTML5
In HTML5, tabindex can be used on any element within a webpage, and the document will still validate successfully. However, there are many cases where adding tabindex has no functional purpose, unless additional scripts are used to make them respond to other keypresses.
Browser Support for tabindex
 |  |  |  |  |  |
| All | All | All | All | All | All |