Widely availableUse tabindex='0' for custom interactive elements that must join the natural tab order, and use tabindex='-1' for programmatic focus targets. Avoid positive values whenever possible.
Interactive Widely available

tabindex

tabindex controls whether an element can receive focus and how it participates in keyboard navigation. It is powerful, but positive tabindex values can quickly create confusing focus order.

FocusKeyboardNavigation

Overview

tabindex controls whether an element can receive focus and how it participates in keyboard navigation. It is powerful, but positive tabindex values can quickly create confusing focus order.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
tabindex
1
12
1.5
3.1
18
2
DOM API
tabIndex

The tabIndex property of the HTMLElement interface represents the tab order of the current element.
1
18
1
3.1
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18)
Implementation note
  • Returns incorrect value for elements without an explicit tabindex attribute. See issue 4365703 for details.

Syntax

HTML 
<!-- make focusable (included in tab order) --> <div tabindex="0" role="button">custom button</div> <!-- focusable only from program --> <div tabindex="-1" id="notification">notification area</div> <!-- order specified with tabindex="0" or higher (deprecated) --> <input tabindex="1"> <input tabindex="2">

Live demo

Tab ki-. ordercontrol

ki-bo-dnavigation. order and focuspossible control. with tabindex

PreviewFullscreen

custommain. Focus

Normal is focus in div equal focuspossible to. with tabindex=0

PreviewFullscreen

tabindex Value. meaning

tabindex positivevalue, 0, -1. Difference.

PreviewFullscreen

Use cases

  • Custom interactive surfaces

    Make a custom card, menu item, or disclosure trigger keyboard-focusable when native elements are not available.

  • Programmatic focus management

    Move focus to an alert, heading, or dialog section with tabindex='-1' when the UI state changes significantly.

Cautions

  • Positive tabindex values create a manual focus order that is hard to maintain and often disagrees with the DOM order.
  • If an element is focusable, it usually also needs keyboard behavior and an accessible role or native semantics.

Accessibility

  • Prefer native buttons, links, and form controls first. Custom focusable elements need much more supporting work.
  • Keep the DOM order aligned with the visual order so keyboard and screen reader navigation stay predictable.

Related links

Powered by web-features