Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Tabindex attribute greater than 0 (A11y Best Practice Violation)

Why tabindex attributes should not be greater than 0 for website accessibility best practices.

Keyboard - Lumar Accessibility Thumbnail

What does this accessibility issue mean?

 Accessibility issue summary: Tabindex attribute is greater than 0

The tabindex attribute is used in HTML to define the order in which elements receive focus when users navigate a webpage using the keyboard. This attribute is crucial for keyboard operability for website accessibility. 

By specifying the tabindex value for an element, web developers can control the sequence in which users can navigate through interactive elements, such as links, form fields, and buttons, using the “Tab” key on the keyboard.

When tabindex values are set greater than 0, it can disrupt the natural flow of keyboard navigation, potentially causing confusion and difficulties for users, especially those relying on assistive technologies. 

A positive tabindex value explicitly modifies the default tab order, and excessive or arbitrary values can lead to an unpredictable and non-intuitive experience for individuals with disabilities, impeding their ability to navigate and interact with web content seamlessly. 

Therefore, adhering to best practices and allowing the browser’s default tab order or using positive tabindex values when necessary contributes to a more accessible and user-friendly web experience for all.

Issue details
  • WCAG Level BP
  • Severity: Serious
  • Category: Keyboard (BP)
  • Rule ID: tabindex

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

Example HTML violation: Tabindex attribute greater than 0 (A11y Best Practice Violation)

<a tabindex="1" href="#content">Skip to content</a>
<div id="content" tabindex="-1">
  <h1>My Website</h1> This is some content.

The above HTML violates the tabindex accessibility rule because the anchor tag has a tabindex value greater than 0.

This is discouraged because it disrupts the natural tab order of the HTML elements.

To address this issue, there are two options:

Option 1: Adjust the tabindex of the anchor element to 0. This allows users to still focus the element using the keyboard while maintaining a natural tab order.

Option 2: Completely remove the tabindex attribute from the anchor. This preserves the default tab order.

For simplicity, let's focus on Option 2. It is important to note that wrapping the content that follows the "skip to content" link in a 'main' tag would better represent the structure of the content.


How to fix "Tabindex attribute greater than 0 (A11y Best Practice Violation)" issue

<a href="#content">Skip to content</a>
<main id="content" tabindex="-1"></main>
<h1>My Website</h1> This is some content.

This modification should solve the accessibility violation.

Do note that further testing is recommended to ensure optimal accessibility. For further understanding of accessibility guidelines, make sure to check the following resources:

  1. W3C Web Accessibility Initiative (WAI)

  2. ACT Rules - particularly on tabbed navigation

  3. Information about setting tabindex for accessibility compliance.

Please do not forget to validate the page after making these changes.

Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform