# Use the tabindex attribute

DevFeed: [Use the tabindex attribute](<https://devfeed.tech/articles/use-the-tabindex-attribute-9395.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/how-to-use-the-tabindex-attribute/>)

Author: Eric Bailey

Published: 2021-01-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web](<https://devfeed.tech/topics/web.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web app](<https://devfeed.tech/topics/webapp.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [web-app](<https://devfeed.tech/tags/web-app.md>)

## AI overview

This article explains how to use the HTML tabindex attribute accessibly. It describes how zero, positive, and negative values affect keyboard and programmatic focus, and warns against positive values, manually defining tab order, and making non-interactive elements focusable. It recommends using native interactive elements in document reading order and relying on their built-in browser behavior.

## Source excerpt

tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way. When tabindex's value is set to zero or a positive number, the element can be navigated to via the keyboard's Tab key. When it is set to a negative number, its element can be programmatically focused via JavaScript. Common mistakes Unfortunately, the tabindex attribute is often misunderstood and consequently misused. Following are some common examples of tabindex use that have a negative impact on accessibility: Using a positive tabindex value Using tabindex with a value of 1, 2, 3, etc. places the element the tabindex is applied first in the keyboard tabbing order. This can create a confusing experience for anyone who relies on the keyboard's Tab key to navigate. Setting a manual tab order You don't need to manually set tab order for every page or view on a website or web app. Not only is this extra, unnecessary work that is difficult to maintain, it may deviate from someone's expected or desired way to navigate. This results an annoying, confusing, and potentially inaccessible experience. Instead, use appropriate interactive elements (a for links, button for buttons, etc.) and put them in the reading order of the document. Interactive elements come with native browser behavior already built in that allows them to be navigated to via Tab without the need for a tabindex declaration. Making non-interactive elements focusable There is a myth that applying tabindex="0" to non-interactive elements (paragraphs, headings, lists, etc.) helps "improve" accessibility by providing a way for a person who uses a screen reader to focus on all the content present in a webpage or web app. Unfortunately, this well-intentioned idea actually does not create a good assistive technology experience. In the same way that you don't need to add a tabindex attribute declaration to native interactive elements, you also don't need to