The tabindex attribute on an <a> tag specifies the keyboard tab order relative to the other controls.
The tabindex value indicates when the anchor element can be focused.
Five elements with tabindex values. Click on the textbox and then tab through the <a> elements with the Tab key. Focused elements appear in gold .
<div>
1. <input tabindex="1" type="text"><br /><br />
2. <a tabindex="2" target="_blank" href="https://google.com">Google</a><br />
3. <a tabindex="3" target="_blank" href="https://apple.com">Apple</a><br />
4. <a tabindex="4" target="_blank" href="https://microsoft.com">Microsoft</a><br />
5. <a tabindex="5" target="_blank" href="https://netflix.com">Netflix</a>
</div>
The tabindex attribute assigns a tab sequence number to an element.
Notice how the tab key steps you throught the elements according to the tabindex order.
The actual tabindex numbers are not important. So, 10, 22, 36, 40, and 50 would be the same.
The tabindex specifies the keyboard tab order relative to the other controls on the page.
With a negative tabindex value, the link is not reachable by tabbing but can be accessed by mouse or JavaScript.
The tabindex attribute is a global attribute that can be applies to any element.
<a tabindex="index">
Value | Description |
---|---|
index | Numeric value indicating the tab order relative to the other controls. |
Here is when tabindex support started for each browser:
Chrome
|
15.0 | Sep 2011 |
Firefox
|
4.0 | Mar 2011 |
IE/Edge
|
7.0 | Oct 2006 |
Opera
|
10.0 | Aug 2009 |
Safari
|
5.1 | Jul 2011 |
Back to <a>