Les actions qui déclenchent un changement de page ou de contenu sont-elles clairement identifiées et sous le contrôle de l'utilisateur ?
Critère officiel 7.4 — Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle ?
Pourquoi c'est important
Une personne aveugle ou avec des difficultés cognitives peut être désorientée si la page se recharge, si un onglet s'ouvre ou si le contenu change sans qu'elle l'ait explicitement demandé. Ce changement inattendu rompt son fil de navigation et peut l'amener dans un contexte qu'elle n'a pas choisi.
Exemples concrets
Ce qui est conforme
Le formulaire de recherche affiche ses résultats uniquement après clic sur le bouton « Rechercher ». Aucun changement de page ne se déclenche lors de la saisie dans le champ. L'utilisateur reste maître du moment du changement.
Ce qui pose problème
Un menu déroulant redirige automatiquement vers une nouvelle page dès qu'une option est sélectionnée, sans bouton de confirmation. Un utilisateur naviguant au clavier peut déclencher une navigation accidentelle en faisant défiler les options avec les flèches.
Comment agir
Vérifiez avec votre prestataire que les formulaires et menus ne déclenchent pas de navigation automatique. Toute action qui provoque un changement de page doit être confirmée par un bouton explicite. Intégrez cette règle dans vos cahiers des charges : « Aucun changement de contexte ne doit se déclencher automatiquement au focus ou à la saisie. »
Règles clés
- Un changement de contexte ne doit pas se produire à la simple prise de focus (critère 3.2.1 — On Focus).
- Un changement de contexte ne doit pas se produire à la simple saisie ou sélection dans un champ, sauf si l'utilisateur en a été informé au préalable (critère 3.2.2 — On Input).
- La solution standard : un bouton de validation explicite ('Aller', 'Valider', 'Voir') déclenche l'action après la sélection.
- Si le changement de contexte est inévitable au onChange, informer l'utilisateur avant l'interaction via une instruction textuelle adjacente.
- Les redirections automatiques temporisées doivent pouvoir être annulées ou prolongées (critère 13.1).
Erreurs fréquentes
- Élément <select> qui déclenche une navigation vers une URL au simple onChange sans bouton de validation
- Formulaire soumis automatiquement au changement d'un champ radio ou checkbox
- Ouverture automatique d'une modal ou d'un panneau au focus d'un champ (datepicker)
- Chargement automatique de la page suivante au scroll infini sans avertissement
- Redirection automatique après un délai (ex. : 'Vous allez être redirigé dans 5 secondes')
Exemples de code
select de navigation automatique
✗ Non conforme<label for="nav-pays">Choisir un pays</label>
<select id="nav-pays" onchange="window.location = this.value">
<option value="/fr">France</option>
<option value="/be">Belgique</option>
<option value="/ch">Suisse</option>
</select>La navigation s'enclenche dès la sélection d'une option. Un utilisateur au clavier qui parcourt les options avec les flèches déclenchera des navigations successives à chaque pression.
select de navigation avec bouton de validation
✓ Conforme<label for="nav-pays">Choisir un pays</label>
<select id="nav-pays">
<option value="">-- Sélectionner --</option>
<option value="/fr">France</option>
<option value="/be">Belgique</option>
<option value="/ch">Suisse</option>
</select>
<button type="button"
onclick="if(document.getElementById('nav-pays').value)
window.location = document.getElementById('nav-pays').value">
Aller sur ce site
</button>Le bouton explicite 'Aller sur ce site' déclenche la navigation uniquement sur action volontaire. L'utilisateur peut parcourir toutes les options sans effet de bord.
soumission automatique sur changement de radio
✗ Non conforme<fieldset>
<legend>Trier les résultats</legend>
<label><input type="radio" name="tri" value="date"
onchange="this.form.submit()"> Par date</label>
<label><input type="radio" name="tri" value="prix"
onchange="this.form.submit()"> Par prix</label>
</fieldset>Le formulaire se soumet dès qu'un radio est sélectionné. Pour un utilisateur de lecteur d'écran naviguant avec les flèches, cela provoque des soumissions à chaque mouvement.
filtre avec bouton de validation
✓ Conforme<fieldset>
<legend>Trier les résultats</legend>
<label><input type="radio" name="tri" value="date"> Par date</label>
<label><input type="radio" name="tri" value="prix"> Par prix</label>
<button type="submit">Appliquer le tri</button>
</fieldset>Le tri s'applique uniquement sur clic du bouton 'Appliquer le tri'. L'utilisateur peut naviguer entre les options sans déclencher de soumission.
Référence WCAG : 3.2.1, 3.2.2