Correct use of tabindex

Definition of tabindex from w3.org:

This attribute specifies the position of the current element in the tabbing order for the current document. The tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard.

In general you shouldn’t need to explicitly set the tabindex of an element on a page, however there are a few exceptions to this:

Elements that aren’t assigned a tabindex by default

Things such as custom controls will need a tabindex added to them in order to make them focusable. To maintain the natural tabbing order of the document use tabindex=0.

Elements you want to remove from the tab order

Adding tabindex=-1 will remove the item from the tabbing order, but you will still be able to programatically reach it, e.g. using Javascript. This might be necessary for hidden content or widgets such as modal windows.

Elements are not in order at the source

More widespread use will be needed if your elements are not in the desired order in the source code. In this case consider programatically adding tabindex values so you don’t need to manually change each value if a new element is added in the middle.

In conclusion, it is almost never necessary to add a tabindex of anything other than 0 or -1 and only when it doesn’t receive focus by default.

Tags: , ,

Leave a Reply