Keyboard users and screen reader users often use the TAB key to navigate to links and form elements. However, there may be times when you wish the TAB key to stop at another location on a Web page.
Adding the attribute TABINDEX=0 to any element forces the TAB key to stop at a location. TABINDEX="0" essentially works as a stop sign for the TAB key without changing the default order of navigation. It does not otherwise change tab order.
Forms Use Case
In FORMS, adding TABINDEX="0" attribute (e.g. & to non-form elements is important for allowing the screen reader to access instructions (e.g. minimum number of characters in a password) which would otherwise be skipped by a screen reader in forms mode.
The TABINDEX=0 attribute can be used outside of forms as well to force a stop. For example, if a webpage has a self-check question for the user, we can use the TABINDEX to force the TAB key to pause at the question first, before being directed to an answer
In the example below, we can see that the question can be tabbed into before directly moving onto the answer. The answer is hidden and it is revealed when it is tabbed into or the pointer hovers over it.
You can use the TABINDEX attribute to manually adjust the Tab order in order to accommodate a visual design (e.g. comparing two items in a form entry).
Note: This example has been moved to a separate page to make it possible to show the example without hampering logical navigation of this page.
When the TABINDEX attribute is used on any element you need to add TABINDEX attributes for all sections of the page to maintain the logical order of navigation.