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.

Specifications

Browser compatibility

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