Skip to main content

HTML Guide

An element with the attribute “tabindex” must not appear as a descendant of an element with the attribute “role=button”.

A descendant element with a tabindex attribute cannot be nested inside an element that uses role="button".

The role="button" attribute marks an element as a button for assistive technologies, but true button elements (using the button tag) should typically manage focus and tab order on their own. Adding a nested element with tabindex inside a role=”button” container can confuse keyboard navigation and accessibility tools. Each tabbable element should have a clear, non-overlapping place in the focus order.

Incorrect example (causes the error):

<div role="button">
  <span tabindex="0">Click me</span>
</div>

Corrected example 1: Move tabindex to the container

<div role="button" tabindex="0">
  <span>Click me</span>
</div>

Corrected example 2: Use a native button element

<button>
  <span>Click me</span>
</button>

Whenever possible, use native elements like button, as they provide correct focus, keyboard, and accessibility behavior without extra attributes or roles. Only use role="button" with proper keyboard and accessibility support if absolutely necessary, and avoid tabbable descendants within such containers.

Learn more:

Related W3C validator issues