tabindex (attribute)

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

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 should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.

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

  • tabindex="0" means that the element should be focusable in sequential keyboard navigation, but its order is defined by the document's source order.

CSS Positioning won't affect your Tab Order; it would only change the Visual Order of your Elements. Tab Order corresponds to the DOM order!

Avoid using tabindex values greater than 0. Doing so will make it difficult for people who rely on assistive technology to navigate and operate page content.

  • 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" would be focused before tabindex="5", 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.

It is not recommended to give positive values to your elements. You will end up jumping between them, and it will be confusing to manipulate between your element's tabindex attribute values. Instead, focus on writing them in a suitable DOM sequence.

If you set the tabindex attribute on an <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.

Note: The maximum value for tabindex is 32767. If not specified, it takes the default value 0.

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 an <div> element to describe a button, instead of the <button> element.

Interactive components authored using non-interactive elements will not be listed in the accessibility tree. This will prevent assistive technology from being able to navigate to and manipulate it. 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.


Specification Status Comment
HTML Living Standard
The definition of 'tabindex' in that specification.
Living Standard No change from latest snapshot, HTML 5.1.
HTML 5.1
The definition of 'tabindex' in that specification.
Recommendation Snapshot of HTML Living Standard, no change from HTML5.
The 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 Specification
The definition of 'tabindex' in that specification.
Recommendation Only supported on <a>, <area>, <button>, <object>, <select>, and <textarea>.

Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes Yes Yes Yes Yes Yes
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.