Quand et comment utiliser l’attribut tabindex

Ceci est une traduction de "How and when to use the tabindex attribute", écrit par Ire Aderinokun et publié sur bitsofco.de. Par ici pour lire l'article original.

tabindex est un attribut global qui peut être appliqué à la plupart des éléments HTML contenant du contenu. Il contrôle deux choses:

  1. Si un élément peut être focusable, soit par une méthode de saisie telle que le clavier, soit par le code, comme avec la méthode focus(); et
  2. À quel moment un élément devient focusable lorsqu'un utilisateur interagit avec la page via un clavier

L'ordre du focus

Pour comprendre le fonctionnement de l'attribut tabindex, nous devons d'abord comprendre comment le focus est contrôlé sur une page.

Il y a six éléments HTML qui peuvent être activés par défaut:

  • <a> avec un attribut href
  • <link> avec un attribut href
  • <button>
  • <input> qui ne sont pas de type="hidden"
  • <select>
  • <textarea>

Par défaut, seuls ces éléments peuvent avoir le focus, soit par un utilisateur qui clique sur la page avec un clavier, soit via la méthode focus() en Javascript.

document.querySelector("a").focus();

Sans aucune intervention, appeler focus() sur un autre élément ne fonctionnera tout simplement pas.

document.querySelector("div").focus();
/* Will not work */

L'ordre dans lequel ces éléments sont placés dans le document HTML contrôle l'ordre dans lequel ils deviennent focusables lors de la navigation au clavier.

Bien que ce comportement par défaut couvre la plupart des interactions dont nous aurions besoin, il peut arriver que nous souhaitions supprimer, ajouter ou réorganiser des éléments dans l'ordre de focusabilité. C'est ici que l'attribut tabindex devient pratique.

Comment utiliser tabindex

L'attribut tabindex peut être appliqué à presque n'importe quel élément, qu'il soit focusable ou non par défaut. La valeur de l'attribut doit être un entier valide et peut être négatif, positif ou zéro.

Tabindex négatif

Un tabindex négatif, par exemple -1, omettra complètement l'élément de l'ordre du focus. Un utilisateur naviguant sur la page à l'aide d'un clavier ne pourra pas accéder à l'élément du tout.

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<button type="button" tabindex="-1">I won’t be in focus :(</button>
<button type="button">I’ll be in focus last</button>

La valeur négative exacte choisie n’a pas d’importance. Étant donné que toute valeur négative retirera l'élément de la focalisation, il n'y a pas de différence si la valeur est -1 ou -99999. Par conséquent, pour des raisons de lisibilité et de cohérence, il vaut mieux rester avec -1.

Tabindex égale à 0

Un tabindex égal à 0 placera l'élément dans l'ordre de focus par défaut, déterminé par sa position dans le code HTML source. Il peut être appliqué à des éléments qui ne sont généralement pas focalisables et les ajoutera à l'ordre de focusabilité naturel comme s'ils l'étaient.

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<div tabindex="0">I’m a DIV and will be in focus second</div>
<button type="button">I’ll be in focus last</button>
Tabindex positif

Enfin, un tabindex positif placera l’élément dans l’ordre du focus, mais sa position sera déterminée par le nombre spécifique, en partant de 1 et en remontant. Les éléments avec un tabindex positif seront également placés devant des éléments qui n’ont pas d’attribut tabindex.

<button type="button" tabindex="1">I’m the first focusable item on the page</button>
<button type="button" tabindex="500">I’m the second</button>
Focus codé et tabindex

En plus de contrôler quels éléments peuvent être focusables via le clavier et l'ordre de focusabilité, l'attribut tabindex contrôle également quels éléments peuvent être focusables via Javascript.

L'ajout de l'attribut tabindex à un élément, quelle que soit sa valeur, permet de le rendre focusable via Javascript. Cela signifie que nous pouvons créer des éléments qui étaient auparavant non focusables via Javascript, sans les rendre pour autant, focusables au clavier.

Par exemple, prenons ce <div> avec un tabindex négatif.

<div tabindex="-1">I'm a div</div>

Si nous devons naviguer à l'aide du clavier, nous verrons qu'il n'est pas possible de lui donner le focus.

Cependant, nous pouvons lui donner le focus en utilisant la méthode focus().

<button type="button" 
        onclick="document.getElementById('demo-div').focus();">
        Click me to focus the DIV
</button>
<div id="demo-div" tabindex="-1">I'm a div</div>

Nous verrons ensuite comment cette différence entre les tabulations et le focus() rend l'attribut tabindex utile.

Quand utiliser tabindex

L'attribut tabindex peut être très utile, mais a des conséquences potentiellement destructives s'il n'est pas utilisé correctement. Chaque catégorie de valeur tabindex doit être utilisée dans des circonstances différentes.

Quand utiliser une valeur de tabindex négative

Comme nous l'avons vu, une valeur tabindex négative supprime l'élément de la focusabilité par tabulation, mais peut ajouter des éléments à la focusabilité par focus().

Les modales en sont un bon exemple. Les modales containers sont généralement des éléments non focalisables tels que <div> ou <section>. Lorsqu'une fenêtre modale est ouverte, nous pouvons vouloir déplacer le focus sur celle-ci afin que les lecteurs d'écran lisent son contenu. Mais nous ne voulons pas que le container modal lui-même puisse recevoir le focus. Ceci peut être réalisé en utilisant un tabindex négatif.

<div id="modal" tabindex="-1">
    <!-- Modal content -->
</div>

<script>
function openModal() {
    document.getElementById("modal").focus();
    // Other stuff to show modal
}
</script>
Quand utiliser une valeur de tabindex égale à 0

Un tabindex à 0 est généralement utilisé pour rajouter le focus aux éléments pour lesquels il a été supprimé via du code.

Un autre cas intéressant pour cette valeur concerne les éléments personnalisés. Par exemple, il se peut que nous devions créer un élément de bouton personnalisé, qui ne pourra pas être mis au point par défaut car ce n'est pas réellement un <button>. Nous pouvons rajouter cette fonctionnalité avec l'attribut tabindex et spécifier son ordre de focus comme le ferait n'importe quel élément de bouton.

<my-custom-button tabindex="0">Click me!</my-custom-button>
Quand utiliser une valeur de tabindex positive

Il n'y a presque aucune raison d'utiliser une valeur positive pour tabindex, et il s'agit en fait d'un anti-modèle. Si vous trouvez qu'il est nécessaire d'utiliser cette valeur pour modifier l'ordre dans lequel les éléments deviennent focalisables, il est probable que vous deviez plutôt modifier l'ordre des éléments HTML.