Dans chaque page web, les changements brusques de luminosité ou les effets de flash sont-ils correctement utilisés ?
Une personne épileptique visite votre site. Un bandeau promotionnel clignote rapidement en plein écran. Trois secondes plus tard, elle est en crise. Ce n’est pas une hypothèse : la vidéo de la cérémonie d’ouverture des Jeux olympiques de Londres 2012 a déclenché des crises chez des spectateurs. Le critère 13.7 est là pour empêcher ça.
La règle fonctionne sur deux seuils alternatifs. Un contenu clignotant ou flashant ne doit pas dépasser 3 occurrences par seconde. S’il franchit ce seuil, sa surface cumulée doit être inférieure à 21 824 pixels pour rester conforme. Une grande surface qui flashe lentement passe. Une petite surface qui flashe vite passe aussi. Une grande surface qui flashe vite : refus immédiat.
Trois flashes par seconde. C’est la limite absolue.
Ces seuils s’appliquent à trois vecteurs distincts : les éléments multimédias HTML (<img> animés, <video>, <svg>, <canvas>, <embed>, <object>), les scripts JavaScript qui alternent des couleurs ou des opacités, et les animations CSS. Pour auditer, l’analyse du code source suffit dans la grande majorité des cas. Un animation-duration: 0.15s avec deux états alternés donne 6,6 flashes par seconde. Pour les vidéos, l’outil PEAT analyse les fichiers .avi et signale automatiquement les séquences à risque.
3 tests pour détecter les effets de flash ou luminosité dangereux
Fréquence ou surface des flashs dans les éléments multimédias
- Repérez dans la page tous les éléments
<img>(GIF animés),<video>,<svg>,<canvas>,<embed>et<object>qui produisent des effets de clignotement ou de flash lumineux. - Pour chacun, vérifiez qu’au moins une des deux conditions suivantes est remplie :
- La fréquence est inférieure à 3 flashes par seconde ;
- OU la surface visuelle affectée dans le rendu est inférieure à 21 824 pixels.
- Si au moins une condition est remplie pour chaque élément identifié, le test est validé.
Pour les GIF : des outils comme Ezgif affichent la durée de chaque frame. Fréquence = 1 ÷ durée d’une frame (en secondes). Pour les vidéos : convertissez en .avi puis analysez avec PEAT.
Fréquence ou surface des flashs produits par script
- Recherchez dans le code JavaScript les fonctions qui modifient rapidement des couleurs, des opacités ou des arrière-plans. Ciblez notamment :
setInterval,setTimeoutrécursif,requestAnimationFrameet les manipulations directes destyle.backgroundColoroustyle.opacity. - Pour chaque effet identifié, calculez la fréquence à partir de l’intervalle de temps et vérifiez qu’au moins une condition est remplie :
- La fréquence est inférieure à 3 changements lumineux par seconde ;
- OU la surface de l’élément affecté est inférieure à 21 824 pixels.
- Si aucun script ne dépasse les deux seuils simultanément, le test est validé.
Fréquence ou surface des flashs produits par animation CSS
- Cherchez dans les feuilles de style les règles
@keyframesqui alternent des valeurs debackground-color,color,opacityoufilterentre un état clair et un état sombre. - Pour chaque animation identifiée, calculez la fréquence : nombre de transitions lumineuses ÷
animation-durationen secondes. Un@keyframesavec deux états suranimation-duration: 0.2sdonne 10 flashes/s. Vérifiez ensuite qu’au moins une condition est remplie :- La fréquence est inférieure à 3 flashes par seconde ;
- OU la surface rendue de l’élément animé est inférieure à 21 824 pixels.
- Si toutes les animations CSS respectent au moins une condition, le test est validé.
Exemples
❌ Non conforme : Animation CSS qui flashe trop rapidement sur une grande surface
<style>
@keyframes flash-danger {
0%, 49% { background-color: #ffffff; }
50%, 100% { background-color: #000000; }
}
.banniere-promo {
width: 900px;
height: 200px;
/* surface : 180 000 px², bien au-dessus de 21 824 px² */
animation: flash-danger 0.15s infinite;
/* fréquence : ~6,6 flashes/s, au-dessus de 3/s */
}
</style>
<div class="banniere-promo">Offre limitée !</div>L’animation alterne noir et blanc toutes les 0,15 seconde, ce qui produit environ 6,6 flashes par seconde. La surface dépasse largement 21 824 pixels. Les deux seuils sont franchis simultanément. Pour une personne photosensible, ce type de contenu peut provoquer une crise d’épilepsie.
✅ Conforme : Indicateur d’état animé conforme par surface réduite et fréquence basse
<style>
@keyframes pulse-statut {
0%, 49% { background-color: #2e7d32; }
50%, 100% { background-color: #66bb6a; }
}
.indicateur-statut {
width: 12px;
height: 12px;
/* surface : 144 px², très en dessous de 21 824 px² */
animation: pulse-statut 0.5s infinite;
/* fréquence : 2 flashes/s, en dessous de 3/s */
border-radius: 50%;
}
</style>
<span
class="indicateur-statut"
role="img"
aria-label="Serveur en ligne"
></span>Deux conditions passent simultanément : la fréquence est de 2 flashes par seconde (sous le seuil de 3) et la surface est de 144 pixels (bien en dessous de 21 824 pixels). Une seule suffirait. L’alternance se fait entre deux nuances de vert proches, ce qui réduit encore l’amplitude lumineuse de l’effet.
Astuces et pièges
⚠️ Les deux seuils sont alternatifs, pas cumulatifs
L’erreur la plus fréquente en audit : croire qu’un contenu doit respecter les deux conditions en même temps. Non. Il suffit que la fréquence soit inférieure à 3/s OU que la surface soit inférieure à 21 824 pixels. Un flash rapide sur un tout petit élément passe. Un flash lent sur une grande surface passe aussi. Ce n’est que si les deux seuils sont franchis simultanément que le critère échoue.
💡 Calculer la fréquence d’une animation CSS en dix secondes
Repérez animation-duration et comptez le nombre de transitions lumineuses dans les @keyframes. Formule : fréquence = transitions ÷ durée (en secondes). Un @keyframes à deux états sur animation-duration: 0.4s donne 2 ÷ 0.4 = 5 flashes/s. Si la surface de l’élément est inférieure à 21 824 pixels, c’est conforme malgré la fréquence élevée.
⚠️ Les GIF animés sont concernés au même titre que les vidéos
Un GIF inséré via <img> relève du test 13.7.1. Ezgif ou FFmpeg permettent d’inspecter la durée de chaque frame. Si les frames durent 80 ms et alternent entre deux luminosités très contrastées, vous obtenez 12,5 flashes/s. Vérifiez aussi la surface de l’élément <img> dans le rendu final : un GIF de 20×20 pixels passe le seuil de surface même à haute fréquence.
⚠️ 13.7 concerne le risque épileptique, 13.8 concerne la distraction
Le critère 13.7 vise les changements brusques de luminosité pouvant déclencher des crises. Le critère 13.8 concerne les contenus en mouvement ou clignotants gênants mais non dangereux (animations de défilement, carrousels, compteurs). Une roue de chargement qui tourne relève de 13.8. Un bandeau qui alterne noir et blanc à 4 Hz relève de 13.7. Les deux critères peuvent s’appliquer au même élément.
💡 PEAT n’accepte que le format .avi
L’outil PEAT (Photosensitive Epilepsy Analysis Tool), développé par Cambridge Research Systems, est la référence pour analyser les vidéos. Il n’accepte que le format .avi. Convertissez vos sources MP4, WebM ou MOV avec ffmpeg avant analyse : ffmpeg -i video.mp4 video.avi. L’outil génère un rapport précis avec les timestamps des séquences non conformes.
Questions fréquentes
Comment mesurer si une animation CSS dépasse 3 flashes par seconde pour le RGAA ?
Formule : fréquence = (nombre de transitions entre état clair et état sombre dans un cycle) ÷ (valeur de animation-duration en secondes). Avec animation-duration: 0.3s et deux états alternés : 2 ÷ 0.3 = 6,6 flashes/s. Dépassement. Si la surface de l’élément animé est inférieure à 21 824 pixels dans le rendu, le critère reste conforme malgré la fréquence élevée.
Comment appliquer le critère RGAA 13.7 aux vidéos YouTube intégrées via iframe ?
Oui. Le critère s’applique à tout contenu présent dans la page, qu’il soit auto-hébergé ou intégré via <iframe>. Vous ne contrôlez pas le montage de la vidéo YouTube, mais vous êtes responsable de ce que vous intégrez. Si la vidéo contient des séquences à risque, affichez un avertissement visible avant la lecture et proposez une alternative.
Quelle différence y a-t-il entre prefers-reduced-motion et les exigences du critère RGAA 13.7 ?
Non. La media query prefers-reduced-motion est une bonne pratique, mais elle ne remplace pas la conformité au critère 13.7. Ce critère est inconditionnel : aucun contenu ne peut dépasser les seuils de flash, que l’utilisateur ait ou non activé cette préférence système. prefers-reduced-motion est davantage pertinent pour les critères 13.8 et les bonnes pratiques de confort visuel.
À quelle taille d'écran correspond le seuil de 21 824 pixels dans le RGAA 13.7 ?
Approximativement un carré de 148×148 pixels, ou un rectangle de 300×73 pixels. Ce seuil représente 25 % du champ de vision central à 10 degrés pour un écran standard vu à distance normale (technique G176 des WCAG). Un petit badge ou indicateur d’état animé passe rarement ce seuil. Un bandeau hero pleine largeur ou une vidéo en lecture automatique le dépasse quasi systématiquement.
Comment auditer un script JavaScript qui modifie des couleurs dynamiquement selon le critère 13.7 ?
Cherchez les appels à setInterval, setTimeout récursif et requestAnimationFrame qui modifient style.backgroundColor, style.opacity ou ajoutent et retirent des classes CSS. Calculez la fréquence à partir de l’intervalle de temps. Si le script est minifié ou obfusqué, ralentissez le CPU dans les DevTools (onglet Performance, CPU throttling à 4×) et comptez visuellement les transitions lumineuses sur une seconde.