# Antipatterns de tabindex : tabindex=’1′ généralisé casse la navigation clavier

> Un intégrateur avait ajouté tabindex="1" sur tous les champs d'un formulaire pour « être sûr que l'ordre soit bon ». Résultat : plus aucune page du site ne se parcourait normalement au clavier.

- Auteur : Clément Hadrot
- Publié le : 2023-05-18
- Mis à jour le : 2023-05-18
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/antipatterns-tabindex-1-generalise/

## L’essentiel

- Toute valeur positive de tabindex écrase l'ordre naturel du DOM
- Un seul tabindex positif suffit à dérégler toute une page
- tabindex="0" et tabindex="-1" restent les seules valeurs à utiliser

Un développeur fraîchement arrivé dans l'équipe d'un client avait constaté, à raison, qu'un des champs de formulaire de contact n'était pas atteint dans le bon ordre au clavier. Pour corriger ce détail, il a ajouté `tabindex="1"` sur ce champ précis. Le problème a semblé réglé. Trois semaines plus tard, en généralisant cette pratique à d'autres formulaires du site pour éviter la même remarque, une bonne partie du site s'est retrouvée avec une navigation clavier complètement absurde.

Ce billet documente cet antipattern classique, très répandu chez les développeurs qui découvrent l'attribut `tabindex` sans en comprendre le fonctionnement complet, et explique pourquoi il faut s'en tenir à seulement deux valeurs dans la quasi-totalité des cas.

## Ce qu'on voit : des tabindex positifs disséminés

En parcourant le code source des différents gabarits du site, nous avons trouvé des valeurs `tabindex="1"`, `tabindex="2"` et même `tabindex="5"` réparties sur douze pages différentes, posées à des moments différents par des personnes différentes, sans coordination ni documentation du choix.

```
<input type="text" name="nom" tabindex="1">
<input type="email" name="email" tabindex="2">
<button type="submit" tabindex="1">Envoyer</button>
```

## Pourquoi c'est un problème : un ordre global, pas local

> L'essentiel à retenir : Toute valeur positive de tabindex écrase l'ordre naturel du DOM ; Un seul tabindex positif suffit à dérégler toute une page ; tabindex="0" et tabindex="-1" restent les seules valeurs à utiliser

La confusion la plus fréquente autour de `tabindex` tient à sa portée : une valeur positive ne définit pas un ordre relatif au sein d'un seul formulaire, elle définit un ordre global pour l'intégralité de la page, prioritaire sur l'ordre naturel du DOM. Un bouton avec `tabindex="1"` situé au milieu d'un article de blog passera avant le menu de navigation principal, le champ de recherche de l'en-tête, et absolument tout autre élément du DOM qui n'a pas reçu, lui aussi, une valeur de `tabindex` positive concurrente. Sur ce site, quarante-sept éléments interactifs répartis sur l'ensemble des pages passaient ainsi systématiquement avant le menu principal, simplement parce qu'un développeur avait, à un moment donné, posé `tabindex="1"` sur un bouton d'un tout autre formulaire.

## Pourquoi c'est un problème : une maintenance impossible

Chaque nouvelle valeur positive ajoutée entre en conflit potentiel avec toutes les autres valeurs positives déjà présentes ailleurs sur le site. Comprendre l'ordre de tabulation réel d'une page nécessite alors de connaître l'intégralité des valeurs posées sur toutes les autres pages, ce qui devient rapidement ingérable dès que plusieurs développeurs interviennent sur le même projet dans la durée.

## Pourquoi c'est un problème : le vrai bug initial restait mal résolu

Le champ de formulaire mal positionné au départ signalait en réalité un problème de structure HTML : le champ apparaissait visuellement avant un autre élément grâce à une mise en page CSS, alors que son ordre réel dans le DOM était différent. Ajouter `tabindex="1"` masquait ce symptôme sans corriger sa cause, la véritable erreur d'ordre dans le document source.

## Quoi faire à la place

- Corriger l'ordre des éléments directement dans le HTML, pour qu'il corresponde à l'ordre visuel voulu
- Réserver `tabindex="0"` aux éléments qui doivent devenir focusables sans l'être nativement, comme un `<div>` transformé en composant interactif personnalisé
- Utiliser `tabindex="-1"` pour retirer temporairement un élément de l'ordre de tabulation tout en le rendant ciblable par script, par exemple pour y déplacer le focus après une action
- Ne jamais utiliser de valeur positive, sauf cas extrêmement rare et documenté explicitement dans le code

```
<input type="text" name="nom">
<input type="email" name="email">
<button type="submit">Envoyer</button>
```

Une fois l'ordre du HTML corrigé pour refléter l'ordre visuel attendu, plus aucun `tabindex` explicite n'était nécessaire sur ce formulaire : l'ordre naturel du DOM suffisait entièrement.

> La règle que nous transmettons à chaque nouveau développeur qui rejoint l'équipe tient en une phrase : si vous êtes tenté d'écrire un tabindex avec un chiffre supérieur à zéro, le vrai problème se trouve ailleurs dans votre HTML.

## Notre verdict

La correction complète a consisté à retirer toutes les valeurs positives de `tabindex` trouvées sur le site, puis à réorganiser dans le DOM les quelques éléments dont l'ordre visuel ne correspondait effectivement pas à l'ordre naturel, en s'appuyant sur la disposition CSS plutôt que sur un attribut correcteur. Le site a retrouvé un ordre de tabulation cohérent sur l'ensemble de ses pages, sans qu'aucune règle globale n'ait besoin d'être mémorisée par l'équipe pour la maintenance future.