Cas d’utilisation de reduced-motion et inverted-colors dans CSS3
Pour faire suite à mon premier article “Le mode inversé, quand accessibilité devient fonctionnalité” et selon les commentaires et tweets reçus, j’ai voulu gratter un peu plus le sujet.
Pour jouer avec quelque chose que personne ne semble utiliser (“inverser les couleurs” tout comme “réduire les animations”), le faire sur un type de contenu que la communauté web méprise encore plus que l’emailing me paraissait tout indiqué : une bannière pub.
Sans grand étonnement, avec la disparition de Flash et les limitations de GIF, les bannières web sont désormais codées en HTML5. Ce n’est pas vraiment mon coeur de métier, certes, mais la demande est ici de produire des bannières bien animées avec une interaction en rollover + compatible tap tactile en moins de 70Ko. Images inclus. On est plus dans une demande d’intégration orienté optimisation & webperf, à laquelle l’outsourcing ou les logiciels type Google Designer ou BannerFlow ont du mal à répondre.
Voici la bannière avec un affichage dit “classique”. En toute transparence, je ne me charge que de la partie technique, la créa est faite par l’agence Toaster.
C’est pas le Pérou, mais on voit qu’il y à 3 étapes, des transitions différentes pour chaque élements, et les mentions légales apparaissant au rollover du bloc “mentions” en bas (au touchstart sur tactile) tout en appliquant un flou sur le contenu en dessous. HTML + CSS + JS + images = 65Ko.
Pour rentrer tout de suite dans le vif du sujet, voici à quoi cette bannière ressemble lorsque l’utilisateur à décidé d’inverser les couleurs.
Le visuel est inversé, totalement méconnaissable et illisible. On ne comprend pas ce qu’il y a dessus. Les titres et éléments orange sont bleus, les logos des marques inversés.
Lorsque l’on cible les éléments avec la media query, on arrive à un bien meilleur résultat. Je pars ici du postulat que ce mode n’est là que pour éviter de se cramer les yeux avec du blanc, mais comme la bannière est déjà sur un fond noir, on revient plus ou moins sur la même créa à 2 ou 3 élements près.
Moins en lien avec mon précédent article mais en petit cadeau bonus, je me suis également “amusé” avec la media query @media (prefers-reduced-motion), pour le résultat suivant :
Les glissements sont remplacés par du fondu d’opacité, et le reste des mouvements sont découpés. Certes, on attire peut-être un peu moins l’oeil du chaland, mais s’il a fait le choix des animations réduites, il appréciera probablement.
A noter que ces deux media-query sont liées aux options d’accessibilité présentent dans macOS et iOS d’Apple, et ne sont donc prises en charge aujourd’hui que par Safari (macOS et iOS).
Donc oui, on est sur un cas d’utilisation ultra minoritaire pouvant toucher une cible ultra réduite sur un support qu’on ne regarde même plus (voir que adBlock va bloquer avant même son affichage). Alors, est-ce qu’on prod ? Partant du fait que c’est conditionné par une media-query, donc aucun effet de bord, je dirais plutôt oui.
J’ai essayé de contacter plusieurs médecins spécialisés dans les défaillances visuelles pour savoir si ce mode inversion de couleurs répond à une défaillance visuel réelle ou n’est juste qu’un gimmick poussé par les éditeurs, sans réponse pour le moment.
