tabindex

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. Mostly useful to create accessible widgets with JavaScript.

  • tabindex="0" means that the element should be focusable in sequential keyboard navigation, but 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" 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.

An element with tabindex="0", an invalid value, or no tabindex attribute should be focused after elements with positive tabindex values in the sequential keyboard navigation order.

If we set the tabindex attribute on a <div>, then its child content cannot be scrolled with the arrow keys unless we 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 -1.

Specifications

Specification Status Comment
WHATWG 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 WHATWG HTML Living Standard, no change from HTML5
HTML5
The definition of 'tabindex' in that specification.		 Recommendation Snapshot of WHATWG 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 compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: Tigt, chrisdavidmills, akshayjai1, asazernik, nickgibson-advanced, de5peratelighter, Modified, stephaniehobson, bedwards, Dorward, teoli
 Last updated by: Tigt,