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

<div role="button" tabindex="0" aria-label="Open Search Panel" onclick="openSearch()">
  🔍 Search
</div>