HTML <area> tabindex Attribute

The tabindex attribute on an <area> tag specifies the tab order relative to the other areas and controls. The tabindex attribute indicates when its area can be focused.

Example

#

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.

Computer Screen Keyboard Mouse
<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>

Code explanation

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.


Using tabindex

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.


Syntax

<a tabindex="index">

Values

#

Value Description
index Numeric value indicating the tab order relative to the other controls/areas.

Browser support

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

You may also like

 Back to <a>
Guides