How and where does tabindex work?

Question

Since I started programming, I’ve observed the use of tabindex in some specific elements.

I understand perfectly that it has to do with pressing the button tab and the focus of the elements, but I still have some doubts regarding their use.

• Why do some programmers use tabindex with the value -1? What use is that?

• And which elements are allowed to use the attribute tabindex?

• What is the event triggered by the element being focused by the use of tab? Would be the focus, even if it is not a matter of inputs?

Answer 1

The estate tabindex defines how an element should behave when navigating through the keyboard, serving mainly to build accessibility of an application, since many people with some kind of restriction use the keyboard - or any other means that simulates the keyboard - as a form of navigation. Briefly, the property defines which elements can receive focus through keyboard navigation and the order this occurs.

Property value must be an integer value, when defined.

• May be a negative value, removing the element from the element sort list focusable. That is, it will not be possible to access it through the key tab.
• May zero, indicating that the element can be focused and that the order must follow the order defined by the DOM. That is, elements that are defined earlier in the DOM are focused first.
• May be a positive value, indicating that the element must be focussed and the order defined by its value increasing. If multiple elements have the same value, precedence is defined by the order in the DOM.

Some elements already have a predefined behavior, such as a, with the property href definite, link, with the property href definite, button, input, whose type is different from hidden, select, textarea and possibly others. These own the property tabindex equal to zero and therefore are in the list of focusable elements following the order defined by the DOM. Any other element than these has by default, tabindex equal to -1 and thus not focusing elements.

For an element to be considered focusable it must meet all the conditions:

1. Own the property tabindex defined (or by default 0).
2. Be rendered on page.
3. Not being an element inert.
4. Not being disabled (property disabled).

Any element considered focusable, upon receiving the focus, triggers the event focus and, by losing focus, the event blur.

div:focus { background: red; }

<div tabindex='0'>Sou uma div focalizável</div>

You can define any element of the page as focusable, as in the example above and even style it with CSS via the selector :focus, but always consider the usefulness and accessibility of your application. A question must be asked and answered before defining the property tabindex: this element is part of the navigation of my application and should be in the list of focusing elements?

To the questions, then:

Why do some programmers use tabindex with the value -1? What is the usefulness of this?

To remove that element from the list of focusable elements via keyboard navigation. As to usefulness (and necessity), it will depend on the application.

And which elements are allowed to use the attribute tabindex?

Basically any element can have the property tabindex defined, since it is a global property of HTML, however, not all have the need for it. A div used to define the application grid, for example, does not need to be accessed through keyboard navigation. Links and fields of a form yes.

What is the event triggered by the element being focused by the use of tab? Would be the focus, whether or not in the case of inputs?

Yes, it’s the event focus, as seen in the previous example. You can read more about here, in item 7.4.2, especially where it says Focusing Steps and unfocusing Steps.

That said, it may seem that ownership will almost never really be necessary, as the elements that should (really) be focusable are already needed by default. However, a common use that justifies the existence and use of property tabindex are the navigation menus that are hidden on the page. For example, if you have a menu that is positioned outside the visible area of the page, but still rendered (i.e., with the property display other than none), the links of the same will be in the list of focusable elements and this generates a strange behavior in the application, because it is expected that when browsing the keyboard, the same is done only in visible elements. Then the links from this menu should own the property tabindex equal to -1 while outside the visible area and equal to 0 when inside the visible area.

The above example can be seen in action in this video on accessibility. The same goes for the property inert, which will be discussed in this question.

Additional reading: W3C User Interaction

Answer 2

Using tabindex, one can specify an explicit order for elements inserted in the page and that should be focusable, insert an element that would otherwise not be focusable in the tab order, and remove elements from the tab order(source).

Focusing here refers to the order in which the elements will be selected by pressing tab for example. It is very useful when you have to generate dynamic pages. As for the negative, note the rule below:

tabindex="0": Inserts an element in the natural tabulation order. The element can be focused by pressing the Tab key, and the element can be focused by calling its Focus method() tabindex="-1": Removes an element from the natural tabulation order, but the element can still be focused by calling your Focus method()

Any tabindex greater than 0 passes the inserted element forward in the natural tabulation order. If there are several elements with a tabindex greater than 0, the tabulation order starts from the lowest value that is greater than zero and goes up. Using a tabindex greater than 0 is considered something out of the standard.