Tabindex (also known as the tabindex attribute) is a global attribute in HTML. Global means: you can basically assign it to any element. Its value is an integer, which determines whether an element is focusable, whether it appears in the tab order and at which position it is focused there. Some elements are focusable by default, such as links with href, button, input, select, textarea or an iFrame. They don't need a tabindex. Without the attribute, the focus moves through these elements in the order in which they appear in the source code.

Tabindex: HTML attribute explained simply (-1, 0, 1)

Q: Tabindex -1, 0 and 1: What do the values mean?

What matters is whether the value is negative, zero or positive. Tabindex -1: Focus via script only With tabindex="-1", an element cannot be reached with the Tab key, but it can be focused directly via JavaScript. You can use this, for example, for an error message after a form has been submitted or for the content of a dialog that has just opened. If you set the value on a button, it disappears from the tab order. Its child elements, however, remain reachable. Tabindex 0: Focus in the natural order With tabindex="0", you make an element focusable that normally isn't. It takes its place in the tab order according to its position in the source code. A typical use case is custom controls that are not based on a native element. Tabindex 1 and higher: Custom order Positive values such as tabindex="1" or tabindex="2" are focused before all other elements, in ascending order. Only then do elements with the value 0 and natively focusable elements follow. What sounds practical at first quickly leads to chaos. That's why Google calls positive values an anti-pattern. According to MDN, the maximum permitted value is 32767.

Q: Why is tabindex important for accessibility?

Many people use websites with the keyboard only, for example due to motor impairments or because they use a screen reader. For them, the tab order is the path through your page. The Web Content Accessibility Guidelines (WCAG) therefore require that all functions can be operated with the keyboard and that the focus order is logical. In Germany, the Accessibility Strengthening Act (BFSG) has also required many providers of digital products and services to make their offerings accessible since June 2025. A clean tab order also improves the user experience for all visitors. Tabindex is not a direct ranking factor. However, Google's Lighthouse tool checks in its accessibility audit whether any elements have a tabindex greater than 0.

Q: What is the difference between tabindex -1 and 0?

Both values make an element focusable. With 0, it can also be reached with the Tab key as usual, whereas with -1 it can only be focused via script.

Q: Can you set tabindex in CSS?

No. Tabindex is a pure HTML attribute. With CSS, you only style how the focus looks visually, for example with :focus-visible.

Q: How do I set tabindex with JavaScript, React or Angular?

In JavaScript, use the property element.tabIndex = -1 and then set the focus with element.focus(). In React, you write the attribute in JSX in camelCase as tabIndex. In Angular, you use tabindex just like in HTML.

Q: Why is my tabindex not working?

Common causes are hidden elements (display: none or visibility: hidden), disabled form fields (disabled), an invalid value (such as an empty string) or positive values somewhere else entirely that mix up the order of the whole page.

Tabindex is an HTML attribute that lets you control whether and in which order the elements of a website can be reached with the Tab key. For everyone who browses without a mouse, it determines whether a page is easy to use. Here you’ll learn what the values -1, 0 and 1 (or other positive numbers) mean, how to use tabindex correctly and which mistakes you should avoid.

What is tabindex? Definition and meaning

Tabindex (also known as the tabindex attribute) is a global attribute in HTML. Global means: you can basically assign it to any element. Its value is an integer, which determines

whether an element is focusable,
whether it appears in the tab order and
at which position it is focused there.

Some elements are focusable by default, such as links with href, button, input, select, textarea or an iFrame. They don’t need a tabindex. Without the attribute, the focus moves through these elements in the order in which they appear in the source code.

This is what tabindex looks like in HTML:

<p id=”error” tabindex=”-1″>Please enter a valid email address.</p>

Tabindex -1, 0 and 1: What do the values mean?

What matters is whether the value is negative, zero or positive.

Tabindex -1: Focus via script only

With tabindex=”-1″, an element cannot be reached with the Tab key, but it can be focused directly via JavaScript. You can use this, for example, for an error message after a form has been submitted or for the content of a dialog that has just opened. If you set the value on a button, it disappears from the tab order. Its child elements, however, remain reachable.

Tabindex 0: Focus in the natural order

With tabindex=”0″, you make an element focusable that normally isn’t. It takes its place in the tab order according to its position in the source code. A typical use case is custom controls that are not based on a native element.

Tabindex 1 and higher: Custom order

Positive values such as tabindex=”1″ or tabindex=”2″ are focused before all other elements, in ascending order. Only then do elements with the value 0 and natively focusable elements follow. What sounds practical at first quickly leads to chaos. That’s why Google calls positive values an anti-pattern. According to MDN, the maximum permitted value is 32767.

Three hexagons show the tabindex values -1 (focus via script only), 0 (natural order) and 1 (custom order) with a short explanation — Figure 1: The three tabindex values and their effect at a glance. (Source: eology)

Why is tabindex important for accessibility?

Many people use websites with the keyboard only, for example due to motor impairments or because they use a screen reader. For them, the tab order is the path through your page. The Web Content Accessibility Guidelines (WCAG) therefore require that all functions can be operated with the keyboard and that the focus order is logical.

In Germany, the Accessibility Strengthening Act (BFSG) has also required many providers of digital products and services to make their offerings accessible since June 2025. A clean tab order also improves the user experience for all visitors. Tabindex is not a direct ranking factor. However, Google’s Lighthouse tool checks in its accessibility audit whether any elements have a tabindex greater than 0.

Two contact forms compared: on the left, the focus order runs from 1 to 4, from name to submit; on the right, the focus jumps to the submit button first because of tabindex="1" — Figure 2: A positive tabindex mixes up the focus order. (Source: eology)

Using tabindex correctly: Best practices

Prefer native elements: Use button instead of a div with a click function. Native elements are focusable without any extra effort and are correctly recognized by screen readers.
Only use 0 and -1: Avoid positive values. The best order is the natural order of the source code.
Structure your source code logically: If the visual layout created with CSS differs significantly from the order in the code, the focus seems to jump around wildly for keyboard users.
Add a role: If a non-interactive element gets tabindex=”0″, it needs a suitable role such as role=”button” and keyboard support.
Keep the focus visible: Don’t remove the focus outline in your CSS without replacing it. Otherwise, nobody can see which element is currently selected.

Frequently asked questions about tabindex

What is the difference between tabindex -1 and 0?

Both values make an element focusable. With 0, it can also be reached with the Tab key as usual, whereas with -1 it can only be focused via script.

Can you set tabindex in CSS?

No. Tabindex is a pure HTML attribute. With CSS, you only style how the focus looks visually, for example with :focus-visible.

How do I set tabindex with JavaScript, React or Angular?

In JavaScript, use the property element.tabIndex = -1 and then set the focus with element.focus().
In React, you write the attribute in JSX in camelCase as tabIndex.
In Angular, you use tabindex just like in HTML.

Why is my tabindex not working?

Common causes are hidden elements (display: none or visibility: hidden), disabled form fields (disabled), an invalid value (such as an empty string) or positive values somewhere else entirely that mix up the order of the whole page.

Should you set tabindex on every element?

No. Many testing tools explicitly point this out as well: tabindex belongs exclusively on interactive elements. Plain text paragraphs with tabindex=”0″ make the path through the page unnecessarily long for keyboard users.

Conclusion: Less tabindex is often more

Tabindex controls how users navigate your website with the keyboard. With -1, you make elements focusable via script, and with 0, you add custom controls to the tab order. You should avoid positive values. Structure your source code logically and rely on native HTML elements. This keeps your website accessible and easy to use. You can find more tips for user-friendly websites in our article on usability.isch auf und setze auf native HTML-Elemente. So bleibt Deine Seite barrierefrei und angenehm zu bedienen. Weitere Tipps für nutzerfreundliche Websites findest Du in unserem Beitrag zur Usability.

This might also interest you

Cloaking

Cloaking is a technique in which a website provides different content for search engines and human visitors. Learn more about it. ... Continue readingCloaking

Google Suggest

Google Suggest is the service for completing questions and texts from Google. How you can use this effectively, you will learn here! ... Continue readingGoogle Suggest

Machine Learning

From voice assistants to autonomous driving—machine learning is behind many innovations. Learn the basics, algorithms, and fields of application. ... Continue readingMachine Learning