tabindex

Description

L’attribut tabindex contrôle la participation d’un élément à la navigation au clavier (touche Tab). Trois valeurs ont des comportements distincts : une valeur négative (typiquement -1) rend l’élément focalisable uniquement par JavaScript ; 0 l’insère dans l’ordre de tabulation naturel du DOM ; une valeur positive définit un ordre de tabulation explicite (déconseillé).

Syntaxe

<!-- Élément non interactif rendu focalisable -->
<div tabindex="0" role="button">Cliquez ou appuyez sur Entrée</div>

<!-- Focalisable uniquement via JS (pas dans le Tab) -->
<div tabindex="-1" id="dialogue">…</div>

Valeurs

Valeur	Comportement
Négative (-1)	Focalisable via .focus() JavaScript, exclu de la navigation Tab
0	Inclus dans la séquence Tab selon l’ordre du DOM
Positive (1, 2…)	Ordre de tabulation explicite — avant les tabindex="0". Déconseillé

Exemples

Gestion du focus sur une modale :

<dialog id="modal" tabindex="-1">
  <h2>Confirmation</h2>
  <button autofocus>Confirmer</button>
  <button>Annuler</button>
</dialog>

<script>
  document.getElementById('modal').showModal();
  // Le focus va sur le bouton autofocus
</script>

Élément interactif personnalisé :

<div role="checkbox" tabindex="0" aria-checked="false"
     onkeydown="if(event.key===' '||event.key==='Enter') this.click()"
     onclick="this.setAttribute('aria-checked',
       this.getAttribute('aria-checked')==='true' ? 'false' : 'true')">
  Accepter les conditions
</div>

Notes

Éviter les valeurs positives : tabindex="1", tabindex="2"… créent un ordre de tabulation explicite qui diverge souvent de l’ordre visuel et du DOM, perturbant les utilisateurs de clavier. Toujours préférer tabindex="0" et organiser le DOM dans le bon ordre.

Éléments interactifs natifs : <a>, <button>, <input>, <select>, <textarea> sont déjà focalisables sans tabindex. Ne pas en ajouter un.

tabindex="-1" pour les modales : placer tabindex="-1" sur un <dialog> permet de lui donner le focus lors de l’ouverture via .focus(), assurant que le lecteur d’écran annonce le dialogue.