Web/HTML/Global attributes/tabindex

The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

It accepts an integer as a value, with different results depending on the integer's value:

• A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with Javascript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

  A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.

• tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document's source order.
• A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767. If not specified, it takes the default value 0.

  Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.

If you set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too. Check out this fiddle to understand the scrolling effects of tabindex.

Accessibility concerns

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using a <div> element to describe a button, instead of the <button> element.

Interactive components authored using non-interactive elements are not be listed in the accessibility tree. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by ARIA.

• Using the tabindex attribute | The Paciello Group

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'tabindex' in that specification.	Living Standard	No change from latest snapshot, HTML 5.1.
HTML 5.1The definition of 'tabindex' in that specification.	Recommendation	Snapshot of HTML Living Standard, no change from HTML5.
HTML5The definition of 'tabindex' in that specification.	Recommendation	Snapshot of HTML Living Standard. From HTML 4.01 Specification, the attribute is now supported on all elements (global attributes).
HTML 4.01 SpecificationThe definition of 'tabindex' in that specification.	Recommendation	Only supported on <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
tabindex	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

See also

• All global attributes
• HTMLElement.tabIndex that reflects this attribute
• Accessibility problems with tabindex: see Don’t Use Tabindex Greater than 0 by Adrian Roselli

tabindex by Mozilla Contributors is licensed under CC-BY-SA 2.5.