Nous avons lancé « Area Flash Checker (Area Flash Checker) », une extension Google Chrome, en quatrième volet de notre série d'extensions dédiées à l'accessibilité web.
Après « Area Contrast Checker », le premier volet, qui repose sur une « analyse par zone » permettant de sélectionner une portion de page par glisser-déposer pour en analyser l'apparence telle qu'elle est affichée, cette nouvelle version étend cette approche au « mouvement ».
Conformément aux critères de réussite WCAG 2.3.1 et 2.3.2, elle permet de vérifier directement, pendant que les éléments bougent, la présence de flashs dans les animations de la page.
Contexte du développement : des flashs faciles à manquer et difficiles à vérifier
Les clignotements intenses et les points rouges clignotants peuvent provoquer des crises d'épilepsie photosensible.
Au Japon, le cas de nombreux téléspectateurs ayant ressenti des malaises après la diffusion d'un dessin animé à la télévision en 1997 est bien connu.
Les WCAG définissent les critères relatifs aux flashs au niveau A, le niveau de base le plus fondamental.
Les flashs suffisamment intenses pour enfreindre ce critère ne sont pas fréquents sur les sites web, mais lorsqu'ils surviennent, ils affectent directement la santé des utilisateurs.
Les flashs ne se limitent pas aux vidéos : ils peuvent aussi survenir avec les animations CSS, les effets réalisés avec Canvas ou les espaces publicitaires.
Jusqu'ici, la vérification des flashs reposait principalement sur des outils d'analyse de fichiers vidéo, comme PEAT.
Ces outils servent avant tout à contrôler les contenus vidéo pendant la phase de production.
Pour vérifier l'état d'un site une fois intégré, il fallait enregistrer l'écran de la page, convertir le fichier vidéo, le charger dans l'outil, puis répéter ces étapes à chaque correction.
« Quand on repère un mouvement suspect, on voudrait pouvoir le vérifier immédiatement. »
C'est de cette préoccupation, partagée sur le terrain, qu'est né le projet.
Mesurer les éléments de la page « en mouvement », sans enregistrement
Il suffit de sélectionner la zone à analyser par glisser-déposer (ou de cibler l'affichage entier), puis de capturer pendant 5 à 60 secondes.
Comme l'outil analyse directement les images rendues, il permet de compter les flashs généraux et les flashs rouges tels que l'utilisateur les voit réellement.
Les animations CSS, vidéos, Canvas, GIF, carrousels et espaces publicitaires se vérifient tous selon la même procédure.
Remarque : si vous souhaitez auditer le fichier vidéo finalisé lui-même, un outil d'analyse de fichiers vidéo est plus adapté.
Cet outil est conçu comme une option pratique pour vérifier rapidement les choses pendant la production et le diagnostic.
Fonctionnalités principales
1. Évaluation des critères de réussite WCAG 2.3.1 / 2.3.2
Affiche la conformité ou la non-conformité pour les « trois flashs ou seuil inférieur » (niveau A) et les « trois flashs » (niveau AAA), séparément pour les flashs généraux et les flashs rouges.
- Flash général
Un aller-retour au cours duquel la luminance relative s'éclaircit d'au moins 0,10 puis s'assombrit (ou inversement). Un cycle est compté lorsque la luminance relative du côté le plus sombre est inférieure à 0,80. - Flash rouge
Selon la définition donnée depuis WCAG 2.1, une transition vers ou depuis un rouge saturé (R/(R+G+B) ≥ 0,8) dont la différence de chromaticité dans l'espace CIE 1976 UCS dépasse 0,2. - Seuil de surface
21 824 px CSS² recommandés par WCAG (25 % de 341 × 256 px).
Les cartes de résultats affichent également le nombre maximal de flashs par seconde, la comparaison entre la surface en violation et le seuil, ainsi que la période dépassant les limites (la seconde de pic).
2. Chronologie et carte des flashs
La chronologie présente l'évolution du taux de variation de luminance, de la surface des flashs et de la surface en violation. En survolant la chronologie ou en utilisant les flèches du clavier, vous pouvez voir superposées dans l'aperçu d'image les zones qui scintillaient dans la sélection à ce moment-là.
3. Précautions pour une utilisation sur des pages réelles
- Demande une capture à 60 fps et affiche la fréquence d'images effective. Un avertissement est affiché lorsqu'un clignotement rapide risque d'être manqué.
- Prise en charge automatique des écrans Retina / haute densité et du zoom du navigateur
- Afin d'éviter les faux positifs, les structures fines, telles que les traits fins et les contours de caractères, sont exclues par défaut du calcul de surface (cette exclusion peut être désactivée selon l'élément mesuré).
- Conception empêchant la superposition de mesure d'apparaître dans les captures
4. Accessibilité de l'outil lui-même
Compatible avec les lecteurs d'écran, l'outil annonce l'état et les résultats de la mesure. Il tient également compte de son ergonomie en tant qu'outil d'accessibilité, notamment la navigation au clavier dans la chronologie et la possibilité de revenir en arrière à tout moment avec la touche Échap.
Note : aucune collecte de données ni aucun envoi vers l'extérieur n'est effectué. Les images capturées sont supprimées de la mémoire du navigateur immédiatement après analyse. Vous pouvez donc l'utiliser en toute confiance sur des pages non publiées ou dans un environnement interne.
Télécharger Area Flash Checker ici
Chez Liberogic, nous visons à faire de l'accessibilité non pas une « prestation spéciale », mais une qualité allant de soi.
Les clignotements sont difficiles à détecter par un diagnostic automatique analysant le HTML ou le CSS et nécessitent une vérification humaine.
L'outil de diagnostic automatique « Lente Scan » permet d'avoir une vue d'ensemble, l'extension permet de vérifier les points individuels, et le jugement final de conformité repose sur un diagnostic manuel par des experts, « Lente Audit ».
La combinaison du diagnostic automatique, des outils de terrain et du diagnostic manuel par des experts soutient une amélioration continue de l'accessibilité.
Une accessibilité plus proche, plus fluide.
Nous continuerons de proposer des outils et des services qui concrétisent les retours du terrain.
