L'utilisateur est-il averti à temps et peut-il prolonger sa session avant qu'un formulaire important n'expire ?
Critère officiel 13.1 — Pour chaque page web, l’utilisateur a-t-il le contrôle de chaque limite de temps modifiant le contenu (hors cas particuliers) ?
Pourquoi c'est important
Une personne âgée qui remplit lentement le formulaire d'inscription aux activités périscolaires — avec la recherche des justificatifs, les hésitations, les interruptions — peut voir sa session expirer après 20 minutes sans avertissement. Toutes ses saisies disparaissent. Elle doit recommencer depuis le début, souvent sans comprendre pourquoi.
Exemples concrets
Ce qui est conforme
Le formulaire de demande de logement social affiche un avertissement 2 minutes avant l'expiration de la session : « Votre session expire dans 2 minutes. Cliquez ici pour prolonger. » L'utilisateur peut prolonger autant de fois que nécessaire. Ses données sont conservées.
Ce qui pose problème
Le même formulaire expire silencieusement après 15 minutes. L'utilisateur clique sur « Envoyer » et voit apparaître une page d'erreur vide, sans indication sur ce qui s'est passé ni possibilité de récupérer les données saisies.
Comment agir
Demandez à votre prestataire de configurer un avertissement visible au moins 2 minutes avant l'expiration de toute session de formulaire complexe. L'utilisateur doit pouvoir prolonger la session par un simple clic, sans perte de données. Pour les formulaires avec pièces jointes, prévoyez des sessions d'au moins 30 minutes.
Règles clés
- Avertir l'utilisateur au moins 20 secondes avant l'expiration via une region live (role='alert').
- Proposer une action simple pour prolonger la session : touche d'activation ou bouton accessible.
- Exception : si la limite de temps est essentielle au service (enchère en temps réel, session de sécurité bancaire de 20+ minutes avec avertissement).
- La balise <meta http-equiv='refresh'> est à éviter — si utilisée, le délai doit être supérieur à 72 heures ou immédiat (0 seconde).
- Les rafraîchissements automatiques de contenu (cours boursiers, fils d'actualité) doivent pouvoir être mis en pause ou arrêtés.
Erreurs fréquentes
- Session expirée sans avertissement préalable — formulaire perdu sans possibilité de récupération
- Redirection automatique via <meta http-equiv='refresh'> sans délai suffisant ni possibilité d'annulation
- Avertissement de timeout affiché visuellement mais non annoncé par un lecteur d'écran (sans live region)
- Prolongation de session possible mais le bouton de prolongation n'est pas accessible (focus non géré)
- Carrousel ou diaporama automatique qui modifie le contenu pendant la lecture (lié aussi à 13.8)
Exemples de code
redirection automatique non contrôlable
✗ Non conforme<!-- Redirection automatique après 10 secondes -->
<head>
<meta http-equiv="refresh"
content="10;url=/accueil">
</head>
<body>
<p>Vous allez être redirigé vers l'accueil.</p>
</body>Redirection après 10 secondes sans moyen de l'annuler. Un utilisateur de lecteur d'écran n'a pas le temps de lire le message et d'agir. La balise meta refresh est à éviter.
avertissement de timeout avec possibilité de prolongation
✓ Conforme<!-- Dialog d'avertissement 2 minutes avant expiration -->
<div role="alertdialog"
aria-modal="true"
aria-labelledby="titre-timeout"
id="dialog-timeout">
<h2 id="titre-timeout">
Votre session va expirer
</h2>
<p>
Votre session expire dans
<span id="compte-a-rebours">2:00</span>.
Souhaitez-vous rester connecté ?
</p>
<button type="button" id="btn-prolonger"
onclick="prolongerSession()">
Rester connecté
</button>
<button type="button"
onclick="seDeconnecter()">
Se déconnecter
</button>
</div>
<script>
// Afficher le dialog 2 minutes avant expiration
// et déplacer le focus sur le bouton de prolongation
function afficherAvertissement() {
const dialog = document.getElementById('dialog-timeout');
dialog.removeAttribute('hidden');
document.getElementById('btn-prolonger').focus();
}
</script>role='alertdialog' annonce le dialog immédiatement au lecteur d'écran. Le focus est déplacé sur le bouton de prolongation. L'utilisateur peut agir au clavier sans avoir à chercher le bouton.
Référence WCAG : 2.2.1, 2.2.2