Le problème
Les valeurs positives créent un parcours prioritaire distinct du document. À mesure que la page évolue, leur numérotation peut déplacer le focus entre zones sans logique.
Exemple : mauvais et correct
Mauvais
<button type="button" tabindex="2">Vérifier la demande</button>
<button type="button" tabindex="1">Envoyer la demande</button>Correct
<button type="button">Vérifier la demande</button>
<button type="button">Envoyer la demande</button>Les boutons natifs sont déjà dans Tab. Sans valeurs positives, le code donne l’ordre vérifier puis envoyer. Le traitement de la demande reste à implémenter.
RGAA concerné
Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.
- Critère 12.8 — Maintenir une tabulation cohérente.
- Critère 12.9 — Éviter les blocages clavier.
- Critère 7.3 — Utiliser les composants scriptés au clavier.
- Critère 10.7 — Afficher le focus sur les éléments concernés.
Impact utilisateur
Au clavier, un ordre incohérent impose des allers-retours ou mène à la validation trop tôt. Recevoir le focus ne suffit pas à rendre une commande utilisable.
Correction
- Les contrôles natifs n’exigent pas tabindex pour l’accès clavier habituel. Organisez le code plutôt que d’ajouter des nombres positifs.
- tabindex="0" place un élément éligible dans la tabulation à son emplacement. Il ne fournit ni rôle ni activation ; évitez de l’ajouter aux paragraphes.
- tabindex="-1" permet généralement un focus programmatique hors tabulation ordinaire. Utilisez-le, par exemple, sur le titre d’une étape avec un déplacement choisi et testé.
Méthode de test
- Avec Tab et Maj+Tab, les commandes doivent suivre un ordre compréhensible.
- Repérez les valeurs positives, puis testez après ouverture de panneaux ou insertion de contenu.
- Pour une cible à -1, déclenchez le déplacement : la destination doit être visible et Tab reprendre de façon cohérente.
Points de vigilance
- tabindex="-1" ne masque pas l’élément au lecteur d’écran.
- tabindex="0" ne transforme pas div en bouton ; préférez les contrôles natifs.
Sources officielles
Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.