SiteLint documentation and guidelines

Set properly to match the correct reading order of content on the page

Description

The misused tabindex attribute represents a significant accessibility issue that affects how users navigate web interfaces using keyboards. When implemented incorrectly, it can severely impact users’ ability to effectively interact with websites, particularly those who rely on keyboard navigation.

The tabindex attribute determines the order in which elements receive keyboard focus during sequential navigation. While it’s intended to customize the tabbing sequence, improper usage can break the natural flow of navigation and create confusing experiences for users.

Disabilities impacted

Visual impairments

  • Screen reader users who rely on logical navigation sequences.
  • Users who cannot easily track visual focus indicators.
  • Those who depend on consistent interaction patterns.

Cognitive disabilities

  • Users who benefit from predictable navigation patterns.
  • Individuals who rely on muscle memory for navigation.
  • Those who may become confused by unexpected focus shifts.

Motor impairments

  • Keyboard-only users who depend on reliable tab sequences.
  • Users with limited dexterity who need predictable interaction patterns.
  • People using assistive technologies that rely on focus management.

Why it matters

Proper tabindex usage is crucial because:

  1. It ensures consistent navigation experiences.
  2. Maintains expected interaction patterns.
  3. Supports assistive technology functionality.
  4. Enables efficient keyboard navigation.

Coding problems and solutions

Common coding problems

Incorrect example
<!-- Problematic implementation -->
<div tabindex="1">Clickable div</div>
<div tabindex="3">Another div</div>
<button tabindex="2">Button</button>

How to Fix It

Default tab order

Correct example
<button type="button">Button</button>
<div role="button">Clickable div</div>
<div role="button">Another div</div>

Custom controls

Correct example
<div 
  tabindex="0"
  role="button"
  aria-label="Custom button"
>Clickable div</div>

Known Limitations

  1. Browser support
    • Some older browsers may handle tabindex differently.
    • Focus management behavior can vary across platforms.
  2. Complex interactions
    • Dynamic content may require careful focus management.
    • Modal dialogs and overlays need special consideration.
  3. Testing challenges
    • Difficult to test all possible navigation scenarios.
    • Requires thorough keyboard testing across devices.

Resources

Standard

  • Standard: WCAG
  • Rule ID: misused-tabindex-attribute