tabindex methodsThe tabindex attribute allows developers to:
A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. The maximum value for tabindex is 32767.
Note: Positive tabindex values override the page’s natural keyboard focus order. This can create a confusing navigation experience for keyboard users and make interfaces harder to maintain. Positive tabindex values should be avoided. Instead, arrange the HTML so the natural tab order is correct.
tabindex="0" means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.
Unlike positive tabindex values, tabindex="0" does not override the page’s natural keyboard tab order. When used appropriately, it does not introduce the focus order problems associated with positive tabindex values.
tabindex="-1" means the element is not reachable via sequential keyboard navigation, but it can still receive focus programmatically.
tabindex="-1" removes an element from the normal keyboard tab order, so keyboard users cannot reach it by pressing TAB. However, the element can still receive focus programmatically, such as by calling element.focus() in JavaScript.
Once focus has moved away, the element is no longer part of the normal tab sequence and won't receive focus again unless JavaScript moves focus back to it.
This makes tabindex="-1" useful for accessibility patterns where focus needs to be managed, such as:
Use the button below to add a new element to the page. When the element is added, JavaScript sends focus to it.