Le problème
La disparition du contrôle actif peut laisser le focus sans repère. Le déplacer à chaque mise à jour interrompt aussi la saisie : adaptez-le au parcours.
Exemple : mauvais et correct
Mauvais
<button id="suite" type="button">Étape suivante</button>
<section id="etape" hidden>
<h2>Vos coordonnées</h2>
</section>
<script>
const suite = document.querySelector("#suite");
suite.addEventListener("click", () => {
document.querySelector("#etape").hidden = false;
suite.hidden = true;
});
</script>Correct
<button id="suite" type="button">Étape suivante</button>
<section id="etape" hidden>
<h2 id="titre-etape" tabindex="-1">Vos coordonnées</h2>
<label for="nom">Nom</label>
<input id="nom" name="nom" autocomplete="name">
</section>
<script>
const suite = document.querySelector("#suite");
suite.addEventListener("click", () => {
document.querySelector("#etape").hidden = false;
suite.hidden = true;
document.querySelector("#titre-etape").focus();
});
</script>La nouvelle étape reçoit le focus sur son titre. tabindex="-1" permet ce déplacement sans ajouter le titre au parcours Tab.
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 — Préserver l’ordre après une mise à jour.
- Critère 7.3 — Utiliser les composants scriptés au clavier.
- Critère 10.7 — Rendre l’élément actif repérable.
Impact utilisateur
Au clavier, la personne doit trouver la prochaine action sans reparcourir toute la page. Un déplacement cohérent peut annoncer le nouveau contexte au lecteur d’écran.
Correction
- Prévoyez une destination par transition : titre d’une étape, élément adapté d’une modale, commande suivante ou repère restant après suppression.
- Après fermeture d’un dialogue, revenez généralement au déclencheur. S’il a disparu ou si la tâche le justifie, choisissez une autre destination logique.
- Pour un résultat sans action attendue, utilisez une région de statut adaptée. Gardez le focus stable pendant la saisie et la consultation.
Méthode de test
- Activez une transition au clavier : le focus doit atteindre un élément visible du nouveau contexte.
- Fermez un dialogue ou supprimez l’élément actif. Vérifiez où reprend le parcours, puis pressez Tab et Maj+Tab.
- Au lecteur d’écran, vérifiez l’annonce du contexte et l’absence de déplacement du focus lors des mises à jour ordinaires.
Points de vigilance
- tabindex="-1" ne déplace pas le focus : appelez focus() lorsque nécessaire.
- Un autofocus généralisé à l’arrivée peut faire manquer des repères de navigation.
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.