tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
L'attribut universel **`tabindex`** est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche `Tab`). Si plusieurs éléments partagent la même valeur d'attribut **`tabindex`**, leur ordre sera calculé en fonction de leur position dans le document.

Exemple interactif
------------------

Cet attribut peut prendre l'une des valeurs suivantes :

* Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;

**Note :** Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec la méthode `focus()`.
* `0` : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;

**Attention :** Le positionnement CSS n'aura pas d'impact sur le `taborder`. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.
* Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.

**Attention :** Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.

Si on utilise l'attribut `tabindex` sur un élément `<div>`, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si `tabindex` est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

**Note :** La valeur maximale pour `tabindex` est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

Exemples
--------

### HTML


```html
<button tabindex="1">Un bouton</button>
<textarea>Saisir un texte</textarea>
<button tabindex="0">Un autre bouton</button>
<button tabindex="1">Et un troisième</button>
```

### Résultat

Accessibilité
-------------

Il faut éviter d'utiliser l'attribut `tabindex` avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément `<div>` plutôt qu'un élément `<button>`).

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs (`<a>`, `<button>`, `<details>`, `<input>`, `<select>`, `<textarea>`, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

* Utiliser l'attribut `tabindex`|*The Paciello Group* (en anglais)
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # attr-tabindex |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* La propriété `HTMLElement.tabIndex` qui reflète cet attribut.
* Les différents attributs universels
* Ce billet en anglais sur l'accessibilité et `tabindex` écrit par Adrian Roselli
* `Document.hasFocus()`