Tabindex Accessibility Cheat Sheet

This cheat sheet helps you apply tabindex properly for keyboard accessibility, aligning with best practices for semantic HTML, ARIA, and accessible design.

🔢 Tabindex Values & Their Meaning

tabindex Value

Description

✅ Use When

❌ Avoid When

tabindex="0"

Includes an element in the natural tab order

For custom elements like <div role="button"> or accessible widgets

On elements already natively focusable like <a>, <button>

tabindex="-1"

Focusable only via JavaScript, not by tabbing

For programmatic focus (e.g., modals, alerts, skip links)

If keyboard users need to reach it with Tab

tabindex="1+"

Overrides natural order with custom tab flow (discouraged)

Very specific UI needs (e.g., legacy systems or game-like interfaces)

Most cases — it disrupts expected navigation

❌ Elements That Don’t Need tabindex="0"

Element
Reason

<a href="...">

Already keyboard-focusable

<button>

Already in tab order

<input>

Naturally focusable

<select>

Naturally focusable

<textarea>

Naturally focusable

<summary>

Focusable by default in <details>

✅ Elements That MAY Need tabindex="0" (When Interactive)

Element
Recommended Usage

<div>

If used as button, link, tab, etc. with appropriate ARIA role

<span>

Same as <div>, when made interactive

<li>

When part of custom components like tabs or menus

<img>

Only when interactive (e.g., image gallery navigation)

<svg>

For clickable icons or custom controls

<section>

When used as a focusable landmark for keyboard navigation

<article>

Same as above — use tabindex="0" only for meaningful keyboard stops

💡 Best Practices

  • Never use positive tabindex (tabindex="1" or more) unless absolutely required.

  • Use tabindex="-1" to trap focus temporarily (e.g., in modals).

  • Combine tabindex="0" with proper roles (role="button", role="link") and keyboard support (Enter, Space handlers).

  • Avoid cluttering the page with unnecessary focus targets — focus should only land on meaningful elements.

✅ Example: Accessible Custom Button

PreviousARIA Attributes Cheat SheetNextaxe DevTools - Web Accessibility Testing

Last updated