SiteLint documentation and guidelines

Positive tabindex

Description

This rule ensures that the use of a positive tabindex is limited and justified. The tabindex attribute controls the tab order of elements within a webpage. A positive tabindex explicitly defines an element’s position in the tab order, which can lead to confusion and accessibility issues if not used carefully. Proper management of tabindex values ensures a logical and predictable navigation order for users relying on keyboard navigation.

Understanding tabindex

  • Positive values: a positive value indicates an explicit position in the tab order. For example, <div tabindex="1"> will make this div HTML element the first item selected when tabbing through the page, regardless of its position in the document flow.
  • Zero (0): setting tabindex="0" makes an element part of the natural tab order based on its position in the document. This is useful for making non-interactive elements like div or span focusable without altering the default tab order.
  • Negative values: a negative value, typically -1, removes an element from the tab order entirely. This means it cannot be focused by pressing the Tab key, although it can still be focused programmatically (via JavaScript).

Disabilities impacted

  • Motor impairments: users with motor impairments who rely on keyboard navigation benefit from a logical and predictable tab order. Misuse of positive tabindex can disrupt the natural flow, making navigation cumbersome.
  • Visual impairments: users with visual impairments using screen readers depend on a consistent tab order to understand and navigate content. The positive tabindex can cause elements to be reached in an unexpected order, leading to confusion.
  • Cognitive disabilities: users with cognitive disabilities benefit from a straightforward and predictable interaction flow. A disrupted tab order can increase cognitive load and make content harder to navigate.

Why it matters

The tabindex attribute should be used thoughtfully to ensure that the navigation order of a webpage is logical and intuitive. Positive tabindex values can override the natural tab order, potentially leading to a confusing user experience. Ensuring proper tab order enhances accessibility and usability, making it easier for all users to interact with web content.

Coding problems and solutions

Common coding problems

  • Overuse of positive tabindex: using positive tabindex values unnecessarily, causing an unnatural navigation order.
  • Inconsistent tab order: applying positive tabindex values inconsistently, leading to a disjointed tab sequence.
  • Ignoring natural tab order: using positive tabindex instead of relying on the natural document order or adjusting the HTML structure.

How to fix it

Minimize use of positive tabindex

Avoid using positive tabindex values unless absolutely necessary. Let the natural document order dictate the tab sequence.

Incorrect example
<input type="text" id="first" name="first" placeholder="First name" tabindex="2">
<input type="text" id="last" name="last" placeholder="Last name" tabindex="1">
Correct example
<input type="text" id="first" name="first" placeholder="First name">
<input type="text" id="last" name="last" placeholder="Last name">

Use tabindex="0" for interactive elements

Use tabindex="0" to include elements in the natural tab order without altering their sequence.

Incorrect example
<button tabindex="5">Submit</button>
Correct example
<button tabindex="5">Submit</button>
Note that many HTML elements considered actionable come with a built-in tabindex. These include links, buttons and form controls.

Structure HTML for logical order

Arrange HTML elements in a logical sequence to avoid the need for positive tabindex.

Incorrect example
<form>
    <input type="password" id="password" name="password" tabindex="2">
    <label for="password" tabindex="1">Password</label>
    
    <button type="submit" tabindex="4">Login</button>
    <label for="username" tabindex="3">Username</label>
    <input type="text" id="username" name="username" tabindex="5">
</form>
Correct example
<form>
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
    
    <button type="submit">Login</button>
</form>

Known Limitations

  • Complex interactive components: for complex interactive components, ensure that the tab order remains logical and intuitive even if positive tabindex values are used.
  • Browser and assistive technology variability: different browsers and assistive technologies may interpret tabindex values differently. Comprehensive testing is recommended.
  • Dynamic content: ensure that dynamically added content maintains a logical tab order without relying heavily on positive tabindex.

Resources