tabindex

Value for the tabindex attribute for an element should not be greater than zero.

Description

The tabindex attribute, a global attribute in HTML, serves the purpose of making elements focusable or managing their order in sequential focus navigation. The tabindex attribute accepts integer values and produces different outcomes based on the value assigned to it -

• Negative (usually tabindex=”-1”) - Irrespective of the exact value, the element is not focusable in the sequential navigation. However, the element can be made focusable programmatically using Javascript
• Zero (tabindex=”0”) - The element is focusable in the sequential navigation after the elements having positive tabindex values
• Positive (tabindex=”3”) - The element should be focusable in the sequential navigation and the order depends on the value of the number A positive value can lead to an unexpected tab order skipping some elements entirely resulting in an unintuitive experience.

Why is it important?

• Can break the normal tab order - The default tab order is determined by the order of elements in the DOM. Using positive values for tabindex, can result in a tab order that is illogical to the user.
• Items can be skipped and can become inaccessible - Using positive values can lead to items getting skipped and interfering with the intended tab flow.

How to fix?

Ensure that the tabindex attribute is not greater than 0 at all places. To make use of the intended functionality of tabindex, use the allowed values.

• tabindex = ”0”: keeps the element in the default focus sequence
• tabindex = “-1”: keeps the element out of focus by default