Votre site ne contient-il pas d'animations ou d'images qui clignotent plus de 3 fois par seconde ?
Critère officiel 13.7 — Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?
Pourquoi c'est important
Des éclats lumineux à une fréquence supérieure à 3 par seconde peuvent déclencher des crises d'épilepsie photosensible. C'est le seul critère d'accessibilité qui relève directement de la sécurité médicale — une crise peut survenir même chez des personnes qui ne savaient pas être photosensibles.
Exemples concrets
Ce qui est conforme
Le site ne contient aucune animation à éclats rapides. Les transitions de carrousel sont lentes et douces. Les GIF animés intégrés dans les actualités ont été vérifiés avant publication — aucun ne dépasse 2 éclats par seconde.
Ce qui pose problème
Un GIF animé récupéré depuis un réseau social et intégré dans un article d'actualité contient des éclats lumineux rapides. Personne n'a vérifié sa fréquence avant publication. Il reste en ligne plusieurs jours.
Comment agir
Avant d'intégrer un GIF animé ou une vidéo avec effets stroboscopiques, vérifiez qu'il ne contient pas d'éclats à haute fréquence. En cas de doute, n'utilisez pas le contenu — préférez une image fixe. Pour les animations créées pour le site (carrousels, transitions), demandez à votre prestataire de s'assurer que la fréquence reste sous 3 éclats par seconde.
Règles clés
- Aucun contenu ne doit flasher plus de 3 fois par seconde.
- Tester avec l'outil PEAT (Photosensitive Epilepsy Analysis Tool) pour les vidéos.
- Respecter prefers-reduced-motion pour les animations non essentielles.
Erreurs fréquentes
- Animations CSS avec clignotement rapide (animation: blink)
- GIF animés avec flashs à haute fréquence
- Vidéos contenant des séquences de flash (stroboscopes)
- Transitions entre pages avec flash blanc ou noir
Exemples de code
animation clignotante à 5 Hz
✗ Non conforme@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.alerte {
animation: blink 0.2s infinite;
/* 5 flashs/seconde — dépasse le seuil */
}5 clignotements/seconde — largement au-dessus du seuil de 3 flashs/seconde.
pulsation lente et sans risque
✓ Conforme@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.alerte {
animation: pulse 2s infinite;
/* 0,5 cycle/seconde — très en dessous du seuil */
}
@media (prefers-reduced-motion: reduce) {
.alerte { animation: none; }
}0,5 cycle/seconde — largement sous le seuil. prefers-reduced-motion désactive l'animation pour les utilisateurs sensibles.
Référence WCAG : 2.3.1