Navigation using the Tab key should be restricted to elements on the page that users can interact with.

Why is this an issue?

The misuse of the tabIndex attribute can lead to several issues:

• Navigation Confusion: It can confuse users who rely on keyboard navigation, as they might expect to tab through interactive elements like links and buttons, not static content.
• Accessibility Issues: It can create accessibility problems, as assistive technologies provide their own page navigation mechanisms based on the HTML of the page. Adding unnecessary tabindexes can disrupt this.
• Increased Tab Ring Size: It unnecessarily increases the size of the page’s tab ring, making navigation more cumbersome.

How to fix it

Simply remove the tabIndex attribute or set it to "-1" to fix the issue.

Code examples

Noncompliant code example

<div tabIndex="0" />

Compliant solution

<div />

Resources

Documentation

• MDN web docs - tabindex
• The a11y project - Use the tabindex attribute