WCAG 3.2.2 À la saisie

Le critère de succès 3.2.2 exige que la modification du réglage d'un composant d'interface ne provoque pas automatiquement de changement de contexte, sauf si la personne a été informée de ce comportement au préalable. C'est un critère de niveau A sous la règle 3.2 (Prévisible) - le pendant, du côté de la saisie, du critère 3.2.1 Au focus.

Le problème de fond

Saisir dans un champ, cocher une case ou choisir une option sont des interactions ordinaires dont on attend raisonnablement qu'elles restent circonscrites au contexte en cours - jusqu'à un envoi explicite, un clic sur un bouton, ou une autre étape délibérée. Si le simple choix d'une option dans une liste déroulante navigue instantanément vers une nouvelle page, ou si cocher une case envoie aussitôt un formulaire, les personnes concernées - en particulier celles qui s'appuient sur une technologie d'assistance et peuvent ne pas percevoir immédiatement qu'un changement important vient de se produire - perdent toute prévisibilité sur les effets de leurs propres actions.

L'exemple classique : la liste déroulante qui navigue toute seule

<!-- Une pratique courante mais risquée -->
<select onchange="window.location = this.value">
  <option value="/produits">Produits</option>
  <option value="/a-propos">À propos</option>
</select>

Une personne voyante utilisant la souris peut relativement bien s'en accommoder, le changement visuel de page étant immédiatement évident. Une personne utilisant un lecteur d'écran, qui parcourt les options avec les touches fléchées pour découvrir ce qui est proposé, peut déclencher une navigation inattendue avant même d'avoir arrêté son choix : chaque appui sur une flèche risque de l'emmener involontairement sur une autre page.

Quand cette pratique EST admise

Le critère n'interdit pas purement et simplement les changements de contexte déclenchés à la saisie : il exige que la personne soit informée du comportement avant d'utiliser le composant. Une liste déroulante explicitement intitulée « Choisissez une page pour y accéder immédiatement » avertit loyalement de l'effet d'une sélection et satisfait le critère, alors même que le comportement de navigation automatique reste inchangé.

La correction, plus sûre et plus courante

Associez la liste déroulante à un bouton « Valider » explicite, de sorte que le choix d'une option se contente de préparer la sélection et qu'une action explicite l'engage :

<select id="choix-page">...</select>
<button type="button" onclick="naviguer()">Valider</button>

Cela évite entièrement de devoir s'appuyer sur l'exception de l'avertissement préalable, et correspond à ce que la plupart des gens attendent par défaut d'un champ de formulaire.