The tabindex attribute on an <area> tag specifies the tab order relative to the other areas and controls.
The tabindex value indicates when the area can be focused.
Three <area> elements with tabindex values of 3, 2, and 1 respectively.
To see <area> focus, place focus on the mouse (in the below image) and then tab a couple times.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area tabindex="3" shape="rect" coords="253,142,16,2" alt="Screen" href="javascript:alert('Screen was clicked');">
<area tabindex="2" shape="rect" coords="262,218,0,156" alt="Keyboard" href="javascript:alert('Keyboard was clicked');">
<area tabindex="1" shape="circle" coords="267,234,22" alt="Mouse" href="javascript:alert('Mouse was clicked');">
</map>
The tabindex attribute assigns a tab sequence number to an area.
The actual tabindex numbers are not important; for example 30, 22, and 10 gives the same results as 3, 2, and 1.
The tabindex specifies the focus order of the <area> relative to the other areas or controls on the page.
This attribute indicates the sequential order of elements using the keyboard's tab key.
With a negative tabindex value, the area 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/areas. |
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>
