HTML - tabindex Attribute

HTML tabindex is a global attribute that allows developers to make HTML elements focusable or prevent them from being sequentially focusable by pressing tab key.

This tag accepts integer values and returns various results depending on the value of the number. A negative value such as tabindex = "-1" means that the element is not reachable via sequential keyboard navigation. Positive values indicate that the element should be focusable in sequential keyboard navigation, with the value of the number determining the element's order.

Syntax

<element tabindex = "" >

Applies On

Since tabindex is a global attribute in HTML, all the tags in HTML support tabindex attribute.

Examples of HTML tabindex Attribute

Below examples will illustrate the HTML tabindex attribute, where and how we should use this attribute!

Navigate through div tags using tabindex

In the following example, let’s see the usage of the tabindex attribute in the HTML document. This code defines tabindex for navigating through various tags like input and div.

<!DOCTYPE html>
<html>

<head>
   <style>
      div:focus {
         font-weight: bold;
      }
   </style>
</head>

<body>
   <p>Click anywhere in this output screen 
   and press tab to navigate.</p>
   <label>First in tab order: 
      <input type="text">
   </label>
   <div tabindex="0">
      Tabbable due to tabindex.
   </div>
   <div>
      Not tabbable: no tabindex.
   </div>
   <label>Third in tab order: 
      <input type="text">
   </label>
</body>

</html>

Positive tabindex Values

Considering the following example, we are demonstrating a positive value for the tabindex attribute. With its order defined by the value of the number. That is, tabindex="2" is focused before tabindex="3" and after tabindex="1".

<!DOCTYPE html>
<html>

<head>
   <style>
      p:focus {
         font-weight: bold;
      }
   </style>
</head>

<body>
   <h2>Click anywhere in this page, 
      then try pressing tab key.</h2>
   <p tabindex="1">
      First in tab order
   </p>
   <p tabindex="2">
      Second in tab order
   </p>
   <p tabindex="3">
      Third in tab order 
   </p>
</body>

</html>

Negative value for tabindex

Let's look at the following example, we are using the negative value of the tabindex attribute. If we pass the negative value, the element is not reachable via sequential keyboard navigation.

<!DOCTYPE html>
<html>

<head>
   <style>
      div:focus {
         font-weight: bold;
      }
   </style>
</head>

<body>
   <h2>Click anywhere in this page, 
   then try tabbing through the elements.</h2>
   <div tabindex="-1">
      tabindex with -1 value!
   </div>
   <div tabindex="2">
      tabindex with 2 value!
   </div>
   <div tabindex="0">
      tabindex with 0 value!
   </div>
   <div tabindex="-2">
      tabindex with -2 value!
   </div>
</body>

</html>

Supported Browsers

Attribute
tabindex	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm