CSS Portal

HTML tabindex Global Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The tabindex global attribute allows developers to control the tab order of elements in an HTML document. This means that they can choose the order in which elements are focused when a user presses the Tab key.

The tabindex attribute can take on an integer value. If the value is zero or positive, the element will be focusable and will be included in the tab order. If the value is negative, the element will be focusable, but will not be included in the tab order.

The tabindex attribute can be used on any HTML element, even those that are not normally focusable, such as paragraphs and headings. This can be useful for creating custom tab orders for forms or other interactive elements.

However, it is important to use the tabindex attribute carefully. If used incorrectly, it can make a web page difficult or impossible to navigate for users who are using a keyboard.

Here are some tips for using the tabindex attribute:

  • Use the tabindex attribute to control the tab order of interactive elements, such as form fields, buttons, and links.
  • Do not use the tabindex attribute to make elements focusable that are not normally focusable, such as paragraphs and headings.
  • Avoid using the tabindex attribute to change the default tab order of elements.
  • If you must use the tabindex attribute to change the default tab order, make sure that the new tab order is logical and easy to understand.

Here is an example of how to use the tabindex attribute to control the tab order of a form:

<form>
  <input type="text" tabindex="1" placeholder="Name">
  <input type="email" tabindex="2" placeholder="Email">
  <input type="submit" tabindex="3" value="Submit">
</form>

In this example, the name field will be focused first when the user presses the Tab key. The email field will be focused next, and then the submit button.

By using the tabindex attribute, developers can create custom tab orders for their web pages that make them easier to navigate for users who are using a keyboard.

Syntax

<element tabindex="number">

Values

  • numberThe number determines the tab order of the element (the order starts with 1).

Example

<p>Using the <kbd>Tab</kbd> button, select the required link:</p> 
<a href="#" tabindex="3">Link # 1</a> <br>
<a href="#" tabindex="2">Link # 2</a> <br>
<a href="#" tabindex="5">Link # 3</a> <br>
<a href="#" tabindex="1">Link # 4</a> <br>
<a href="#" tabindex="4">Link # 5</a>

Browser Support

The following information will show you the current browser support for the HTML tabindex global attribute. Hover over a browser icon to see the version that first introduced support for this HTML global attribute.

This global attribute is supported by all modern browsers.
Desktop
Chrome
Edge
Firefox
Opera
Safari
Tablets & Mobile
Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-

Last updated by CSSPortal on: 14th October 2023

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!