# An element with the attribute “tabindex” must not appear as a descendant of the “a” element.

> Canonical HTML version: https://rocketvalidator.com/html-validation/an-element-with-the-attribute-tabindex-must-not-appear-as-a-descendant-of-the-a-element
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `<a>` element is an interactive content element — it's already focusable and keyboard-navigable by default. When you place an element with a `tabindex` attribute inside a link, you create a nested focus target. This means that keyboard users and screen readers encounter two (or more) focusable items where only one is expected. The browser may not handle this consistently, and the user experience becomes unpredictable: should pressing Enter activate the link, or the inner focusable element?

The HTML specification defines that certain interactive elements must not be nested within other interactive elements. An `<a>` element's content model explicitly forbids interactive content as descendants. Adding `tabindex` to any element makes it interactive (focusable), which violates this rule.

This matters for several reasons:

- **Accessibility:** Screen readers may announce nested focusable elements in confusing ways, or skip them entirely. Users relying on keyboard navigation may get trapped or confused by unexpected tab stops inside a link.
- **Standards compliance:** The W3C validator flags this as an error because it violates the HTML content model for anchor elements.
- **Browser inconsistency:** Different browsers may handle nested focusable elements differently, leading to unpredictable behavior across platforms.

To fix this issue, you have a few options:

1. **Remove the `tabindex` attribute** from the descendant element if it doesn't need to be independently focusable.
2. **Restructure your markup** so the focusable element is a sibling of the `<a>` element rather than a descendant.
3. **Rethink the design** — if you need multiple interactive targets in the same area, consider using separate elements styled to appear as a single unit.

## Examples

### ❌ Invalid: Element with `tabindex` inside an `<a>` element

```html
<a href="/products">
  <div tabindex="0">
    <h2>Our Products</h2>
    <p>Browse our full catalog</p>
  </div>
</a>
```

The `<div>` has `tabindex="0"`, making it focusable inside an already-focusable `<a>` element. This creates conflicting focus targets.

### ✅ Fixed: Remove `tabindex` from the descendant

```html
<a href="/products">
  <div>
    <h2>Our Products</h2>
    <p>Browse our full catalog</p>
  </div>
</a>
```

Since the `<a>` element is already focusable and clickable, the inner `<div>` doesn't need its own `tabindex`. Removing it resolves the conflict.

### ❌ Invalid: `span` with `tabindex` inside a link

```html
<a href="/profile">
  <span tabindex="-1">User Name</span>
</a>
```

Even `tabindex="-1"` (which removes the element from the natural tab order but still makes it programmatically focusable) triggers this validation error when used inside an `<a>` element.

### ✅ Fixed: Remove `tabindex` from the `span`

```html
<a href="/profile">
  <span>User Name</span>
</a>
```

### ❌ Invalid: Button-like element nested inside a link

```html
<a href="/dashboard">
  <div tabindex="0" role="button">Settings</div>
</a>
```

### ✅ Fixed: Separate the interactive elements

```html
<div class="card-actions">
  <a href="/dashboard">Dashboard</a>
  <button type="button">Settings</button>
</div>
```

If you truly need two distinct interactive elements, place them as siblings rather than nesting one inside the other. Use CSS to style them as a cohesive visual unit if needed.