SVG dans PowerApps : Et l'accessibilité dans tout ça ?

Nelson Boruchowitch — Thu, 27 Aug 2026 00:00:00 +0000

TL;DR : L'usage du SVG est devenu un réflexe pour dynamiser nos Canvas Apps. Sauf qu'une partie de vos utilisateurs a demandé à son système d'arrêter les animations, et que Power Fx n'a aucun moyen de le savoir. Le CSS embarqué dans le SVG, si : @media (prefers-reduced-motion: reduce) est bel et bien évalué à l'intérieur d'une Canvas App, à chaque ouverture de session. Voici le pattern prêt à coller, le banc d'essai qui le prouve, la raison précise pour laquelle cette lecture est un instantané et non un flux, et l'architecture en cascade qui en fait un pattern réellement utilisable en production.

Partie 1 sur 5 · 4 min de lecture

Le problème et la réponse

Le constat et le code qui le règle.

1. Une tendance et un angle mort

Les SVG sont pratiques, légers, nets à toutes les tailles, colorables avec Power Fx et au vu de la pléthore de ressources disponibles en ligne, nous avons de quoi faire.

Mais une tendance est progressivement apparue : le SVG animé. Un spinner qui tourne, un halo qui pulse sur la date du jour, une icône qui se dessine à l'ouverture de l'écran. Ça donne immédiatement un côté vivant à une app, pour un coût dérisoire de quelques lignes.

Sauf que pour une partie de vos utilisateurs, ce mouvement n'est pas une touche sympa mais une gêne physique. Troubles vestibulaires, sensibilité migraineuse, certains troubles de l'attention : ces personnes ont déjà dit à leur système d'exploitation qu'elles ne voulaient plus d'animations dans les paramètres de Windows et votre app ne les écoute pas.

Ce n'est pas une question de confort, c'est écrit dans les référentiels :

WCAG 2.2.2 : Mettre en pause, arrêter, masquer (niveau A) : tout contenu en mouvement qui démarre automatiquement et dure plus de 5 secondes doit pouvoir être mis en pause.
WCAG 2.3.3 : Animation par interaction (niveau AAA) : les animations non essentielles déclenchées par une interaction doivent pouvoir être désactivées.

Quand on parle d'accessibilité dans une Canvas App, on parle en général d'AccessibleLabel, de TabIndex (ordre de tabulation), de contraste et de Live regions. Tout ça est documenté, tout ça passe dans l'Accessibility Checker. Le mouvement, lui, n'est nulle part. Il n'existe pas davantage dans Power Fx : il y a Host.OSType, Host.BrowserUserAgent, App.Width... et rien du tout sur les préférences d'accessibilité du système. Aucun Host.PrefersReducedMotion.

Concrètement : votre Timer qui fait glisser un panneau, votre Transition sur un bouton, votre badge qui clignote, ils tournent, quoi que l'utilisateur ait demandé à son OS. Et vous n'avez, en apparence, aucun moyen de le savoir.

Bonne nouvelle : vous n'avez pas besoin de Host.PrefersReducedMotion. La préférence est déjà là, à l'intérieur même de vos SVG. Il suffit de trois lignes de CSS.

2. La réponse tient en trois lignes de CSS

Prenons un cas réel. Dans mon composant cmpCalendar, la date du jour porte un halo qui pulse doucement. Voici la version qui écoute le système :

"data:image/svg+xml;utf8," & EncodeUrl(
    "" &
    "" &
    "" &
    ""
)

Par défaut : un halo qui respire. Sous reduce : un anneau net, immobile, légèrement plus épais pour rester tout aussi visible. L'information "c'est aujourd'hui" est intacte dans les deux cas. Aucun If() dans la formule, aucune variable, aucune logique Power Fx : c'est le CSS qui arbitre.

Lecture de votre préférence système...

no-preferencevotre rendu

Le halo respire. stroke-width:2

reducevotre rendu

Anneau net, immobile. stroke-width:2.5

Il manque une ligne pour que ce soit fiable, et une seule. Dans App.OnStart :

// App.OnStart
Set(gblBust, GUID())

Cette variable n'apparaît pas dans le code ci-dessus, mais elle doit y être. J'explique en section 8 pourquoi elle n'est pas un artefact de debug mais le mécanisme de lecture lui-même.

C'est tout. Pas de connecteur, pas de PCF, pas de composant. Une chaîne de caractères.

Maintenant, pourquoi ça marche.

Partie 2 sur 5 · 7 min de lecture

Pourquoi ça marche

Cette partie explique par quelle porte le CSS entre dans une Canvas App, et pourquoi la voie qui semble évidente, la balise Non la feuille de style est retirée par l'assainisseur style="..." Non la grammaire CSS interdit une at-rule dans un attribut Oui le SVG embarque son propre document, donc sa propre feuille de style

Ce qui change complètement la façon de voir le problème. Le point décisif n'est pas le contrôle Image, c'est le data URI. Le contrôle Image n'est que le chemin le plus court pour s'en servir.

Rien n'empêche donc de faire cohabiter les deux dans le même contrôle. Voici le montage complet, à coller dans la propriété HtmlText :

// Propriété HtmlText d'un contrôle Texte HTML
"" &
    "Votre texte, vos liens, votre mise en forme.
" &
    " &
    EncodeUrl(
        " &
        "" &
        "" &
        ""
    ) & "'>" &
"
"

Le HTML extérieur porte alors ce qui appartient vraiment au HTML : du texte, de la mise en forme, des liens. Le SVG porte le rendu graphique et la media query. Une précision s'impose cependant sur l'interactivité, parce qu'elle se paie. Le contenu affiché est bel et bien vivant : mesuré en app publiée, un lien ouvre une fenêtre, une case à cocher se coche, un bloc

se déplie. Mais il est muet. Rien de tout cela n'atteint Power Fx, qui ne saura jamais que la case est cochée. Le contenu vit, mais il ne parle pas.

Le seul pont vers l'application est l'OnSelect du contrôle. Il existe et il se déclenche, mais c'est l'événement du contrôle, pas celui de son contenu : il est unique et global, et rien dans Power Fx ne dit où le clic a eu lieu. Autant de zones réactives que l'on veut, autant de contrôles à poser. Dans un composant de graphe, le montage utile reste donc le même : le tracé et son comportement visuel vivent dans l'image, et l'interactivité que l'image ne sait pas fournir vient de Power Apps, posée autour d'elle ou par-dessus.

Et ce n'est pas une hypothèse. La section 7 construit un banc d'essai qui éprouve chaque maillon : le canari montre que le CSS du SVG est bien évalué, puis les sondes prefers-color-scheme et prefers-reduced-motion montrent que les media queries de préférence utilisateur répondent elles aussi. Ce banc est écrit pour la propriété Image, le chemin le plus court ; c'est le même SVG que j'ai posé dans le src d'une pour éprouver le contrôle Texte HTML, et la section 9 en rend compte.

Partie 3 sur 5 · 5 min de lecture

Le faire proprement en production

Le mécanisme est acquis. Reste à s'en servir sans dégrader l'expérience : ce qu'il faut mettre à la place du mouvement, et comment laisser malgré tout le dernier mot à l'utilisateur.

5. Réduire n'est pas supprimer

L'erreur classique est de traiter prefers-reduced-motion: reduce comme un interrupteur général : animation: none partout, et on n'en parle plus. C'est un contresens. Une animation porte souvent de l'information, "ça charge", "c'est ici que ça vient de changer", "cet élément est actif".

Si vous la supprimez sans rien mettre à la place, vous ne rendez pas l'app plus accessible : vous en retirez une couche d'information à un public qui en a déjà besoin.

La bonne règle : remplacer le mouvement par un équivalent statique qui porte la même information. Un halo qui pulse devient un anneau plein. Un slide devient un fondu (les changements d'opacité et de couleur sont bien mieux tolérés que les grands déplacements). Une durée longue devient une durée courte.

C'est ce que fait le halo de la section 2, avec son stroke-width qui passe de 2 à 2,5.

5.1. Le cas limite : le chargeur

Même principe, autre usage :

"data:image/svg+xml;utf8," & EncodeUrl(
    "" &
    "" &
    "" &
    ""
)

Attention ici : un spinner immobile ne communique plus "en cours". En complément de ce SVG, c'est un vrai texte de statut à côté, dans un Label PowerApps, avec Live: Assertive, qui annonce "Chargement..." puis "Terminé". C'est de toute façon ce qu'il fallait faire pour les lecteurs d'écran. Le mode réduit ne fait que rendre l'omission visible.

6. Le pattern à trois modes

Les deux exemples ci-dessus sont bons pour illustrer, mais ils laissent une objection légitime sans réponse : et si l'utilisateur veut décider pour cette application précise ? Peut-être qu'il a coupé les animations partout dans Windows mais qu'il tolère les vôtres. Peut-être l'inverse : Windows ne dit rien, mais votre app en fait trop à son goût.

Voici la forme que je recommande en production. Une variable Power Fx à trois valeurs arbitre, et le CSS ne décide que dans un seul des trois cas.

"data:image/svg+xml;utf8," & EncodeUrl(
    " &
        "class='" & Switch(gblMotionMode, "reduce", "red", "full", "ful", "sys") & "' " &
        "data-build='" & gblBust & "'>" &
    "" &
    "" &
    ""
)

Trois modes, trois comportements :

`gblMotionMode`	Classe	Comportement
`"system"` ou vide	`sys`	le CSS décide, via la media query
`"reduce"`	`red`	anneau immobile, quoi qu'en dise Windows
`"full"`	`ful`	animation, quoi qu'en dise Windows

Quatre points de conception méritent quelques explications, parce qu'ils sont contre-intuitifs :

L'état de base est statique. .halo seul ne porte aucune animation. Celle-ci est ajoutée par .ful, ou par .sys sous media query. C'est l'inverse de ce qu'on écrit spontanément (déclarer l'animation, puis l'annuler avec animation: none dans un bloc reduce), et c'est l'inverse de ce que fait le halo de la section 2. La version inversée est plus sûre : si le CSS ne s'évalue pas, si la classe n'arrive pas, si gblMotionMode est vide, le résultat est l'anneau immobile. Le comportement sûr devient le comportement par défaut, tandis que l'animation n'est activée que si elle est explicitement demandée. Pour illustrer un principe, on veut voir l'annulation ; en production, on préfère qu'un échec reste silencieux et sans conséquence.

Le Switch a un cas par défaut. Sa dernière valeur, "sys", s'applique si gblMotionMode est vide, ce qui est l'état d'un utilisateur qui n'a jamais rien réglé. Le comportement par défaut de l'application est donc "suivre le système". C'est le bon défaut, et il faut le choisir consciemment : un If() booléen écrit à la va-vite renverrait Blank() sur la branche else et vous donnerait exactement l'inverse de ce que vous vouliez.

Le sélecteur descendant fonctionne parce que la racine est bien un ancêtre du . C'est un point qui prête souvent à confusion, mais le fonctionnement est ici tout à fait classique.

reduce ne veut pas dire "rien". Notez le stroke-width : 2 en mode animé, 2,5 en mode immobile. C'est la règle de la section 5, appliquée.

Et côté Power Fx :

Set(gblBust, GUID());
Set(
    gblMotionMode,
    Coalesce(
        LookUp(Preferences, Utilisateur = User().Email, ModeAnimation),
        "system"
    )
)

Un simple Radio ou Dropdown à trois options dans votre écran de préférences, un Patch vers votre liste, et vous donnez le contrôle à l'utilisateur sans jamais lui imposer de configurer quoi que ce soit.

Choisissez un mode : l'aperçu se recompose exactement comme le ferait gblMotionMode dans votre application.

"system" ou vide Classe sys : le CSS décide, via la media query. C'est le défaut. "reduce" Classe red : anneau immobile, quoi qu'en dise Windows. "full" Classe ful : animation, quoi qu'en dise Windows.

Partie 4 sur 5 · 12 min de lecture

La preuve

Tout ce qui précède repose sur une affirmation qu'il fallait vérifier plutôt que croire. C'est la partie la plus longue, et la plus facile à sauter : si vous me croyez sur parole, passez directement à la partie 5. Si vous voulez au contraire le banc d'essai à coller chez vous, c'est ici.

7. "Mais est-ce que ça marche vraiment ?" : le banc d'essai

Tout ce qui précède repose sur une affirmation : la media query est évaluée à l'intérieur d'une image SVG affichée par un contrôle PowerApps. Voici comment je l'ai vérifié, et comment vous pouvez le vérifier sur vos propres hôtes en trente secondes.

La formule complète, à coller dans la propriété Image d'un contrôle Image :

"data:image/svg+xml;utf8," & EncodeUrl(
    "" &
    "" &
    "" &
    "1. moteur CSS : inactif" &
    "1. moteur CSS : actif" &
    "2. prefers-color-scheme : non evalue" &
    "2. prefers-color-scheme : light" &
    "2. prefers-color-scheme : dark" &
    "3. prefers-reduced-motion : non evalue" &
    "3. prefers-reduced-motion : no-preference" &
    "3. prefers-reduced-motion : reduce" &
    "build : " & gblBust & "" &
    ""
)

Et dans le OnStart de l'app (ou le OnVisible de l'écran, ou le OnSelect d'un bouton "Rafraîchir") :

Set(gblBust, Text(Now(), "[$-en-US]yyyymmddhhmmssfff"))

Un horodatage plutôt qu'un GUID() ici, est délibéré : le banc affiche cette valeur en bas de l'image, et lire l'heure du rendu évite de conclure sur un écran périmé. En production, où elle est invisible, GUID() fera mieux, la section 8 explique pourquoi. Quant au préfixe [$-en-US], il n'est pas décoratif non plus : la section 10 lui est consacrée.

Le code a l'air d'un empilement de classes CSS un peu étrange mais en réalité chaque bloc répond à une question de méthode précise.

7.1. Le principe : trois états, dont un état "je ne sais pas"

Toute l'astuce tient dans un choix de conception : chaque sonde possède un état par défaut visible, qui signifie "non évalué".

Prenons la sonde 3 :

.c0, "non évalué" : opacity: 1 par défaut, donc visible.
.c1, "no-preference" : opacity: 0 par défaut, révélée uniquement par la media query correspondante.
.c2, "reduce" : idem.

Les trois textes sont superposés exactement au même endroit (x='20' y='220'). Un seul est visible à la fois. Le texte affiché est le résultat.

Pourquoi ce troisième état ? Parce que sans lui, on ne peut pas distinguer deux situations radicalement différentes :

la media query est supportée et retourne false ;
la media query n'est pas supportée du tout, ou le CSS ne s'exécute pas.

Dans les deux cas, l'écran n'afficherait rien de spécial. C'est un contrôle négatif : sans lui, l'expérience ne prouve rien. Avec lui, un "non evalue" qui reste affiché en rouge est une information exploitable, pas un silence ambigu.

C'est le même réflexe qu'un test unitaire qui doit d'abord échouer pour qu'on sache qu'il teste vraiment quelque chose.

7.2. La sonde 1 : le canari

@media (min-width:1px){.a0{opacity:0}.a1{opacity:1}}

Celle-ci ne teste aucune préférence. min-width: 1px est vraie dans tous les cas où le CSS est évalué (le SVG fait 600 px de large : pour cette condition, le navigateur se base sur la largeur du SVG lui-même, pas sur celle de l'écran.).

C'est un canari. Si "moteur CSS : actif" s'affiche en vert, on sait que :

le data URI a été correctement décodé ;

la balise

`8. gblBust n'est pas un artefact de test`


C'est, de très loin, le point qui m'a coûté le plus de temps. Il est en réalité le mécanisme de lecture lui-même.
Le data URI est l'URL de l'image. Si la chaîne produite est identique octet pour octet, le navigateur renvoit l'image déjà décodée depuis son cache mémoire. Alors que c'est au moment du décodage et à ce moment seulement que les media queries du SVG sont évaluées. Chaîne inchangée, pas de décodage. Pas de décodage, pas d'évaluation.
Vous changez le réglage dans Windows, vous revenez dans l'app, vous cliquez partout... et rien ne bouge. Non pas parce que ça ne marche pas, mais parce que rien n'a été rechargé.
L'attribut data-build est totalement inerte : il n'a aucun effet sur le rendu. Sa seule fonction est de faire varier la chaîne, donc l'URL, donc de forcer un décodage neuf et une nouvelle évaluation des media queries. Et la ligne build : ... affichée en bas de notre banc d'essai n'est pas cosmétique : elle vous dit quelle version vous êtes réellement en train de regarder.
Conséquence directe, et c'est elle qui rend le pattern utilisable en production :
Set(gblBust, GUID())
Cette ligne garantit qu'à chaque ouverture de session, la chaîne du data URI est recréée, puis décodée et évaluée en fonction de l'état actuel du système. Ainsi, un utilisateur qui a désactivé les effets d'animation dans Windows retrouve automatiquement ce réglage dans votre app, sans aucune configuration supplémentaire.
C'est la ligne annoncée en section 2 et le halo doit donc porter lui aussi un data-build='" & gblBust & "' sur sa balise , exactement comme le fait le pattern à trois modes de la section 6.
En production, la valeur est invisible et et sert uniquement à casser le cache : GUID() garantit une valeur unique, sans dépendre de la locale ni du format de date. Lors des tests, l'horodatage était pertinent puisqu'il était affiché.
Un mot sur la portée réelle de cette ligne. Sur un rechargement complet de page, un nouveau document est créé et les images sont décodées à neuf de toute façon. gblBust est là pour couvrir les autres cas, qui sont nombreux dans une application : navigation interne, réaffichage d'un écran, retour depuis un autre onglet. C'est une assurance à une ligne.
9. Le verrou au décodage
Voici le comportement qui surprend tout le monde, moi le premier, et qui a une explication précise.
Ouvrez l'app pour que le banc d'essai affiche no-preference, le carré bouge. Sans fermer l'app, allez dans les réglages Windows, désactivez les effets d'animation, revenez. Le carré bouge toujours.
Ce n'est pas que la media query a échoué mais c'est que le tampon d'image n'a pas été redessiné. Chromium a un bug référencé pour ça, l'issue 1093736 : les images SVG ne sont pas redessinées lorsque les media queries changent. Le rendu fonctionne la plupart du temps, mais ne réagit pas si la préférence bascule en cours de route. Le contournement documenté est exactement celui de la section 8 : forcer le redessin.
// Bouton "Relire la préférence système", OnSelect
Set(gblBust, GUID())
Il faut donc être précis sur ce que ce pattern est et n'est pas. Ce n'est pas un flux, c'est un instantané. Le SVG lit la préférence au moment où il est décodé et conserve ce résultat jusqu'au prochain décodage. Rien ne le notifie d'un changement.
Pour les plus curieux ! Il faut même aller plus loin, parce que de tout ceci, peut découler cette question : si le SVG, lui, connaît la préférence, ne peut-on pas la lui faire dire ? Du coup, j'ai essayé encore et encore. Le contrôle Image possède une propriété que le moteur alimente lui-même, OriginalWidth, disponible avec CalculateOriginalDimensions. L'idée était de fabriquer un SVG dont la largeur dépendrait de la media query : la valeur serait devenue un booléen déguisé, lisible depuis Power Fx.
Le canari m'a répondu clairement non. Avec une media query vraie partout, @media (min-width:1px){svg{width:120px}}, la largeur rapportée n'a jamais bougé : 240 quand le document déclare width='240', et 300 quand il ne déclare rien, c'est-à-dire la taille de repli du navigateur. Jamais 120, et le relevé est rigoureusement identique que les effets d'animation de Windows soient activés ou coupés. Le CSS est pourtant bel et bien évalué, la section 7 le prouve ; il ne participe simplement pas au calcul de la taille rapportée à l'hôte. Le moteur renvoie ce que le document déclare, jamais ce qu'il a dessiné.
Un détail de cette tentative mérite d'être gardé, parce qu'il peut piéger au-delà de ce sujet : entre deux décodages, OriginalWidth passe par 0. Une lecture naïve du type largeur < 200 renvoie donc true pendant cet intervalle, alors que l'image n'a pas encore retrouvé ses dimensions. On peut alors prendre cet état transitoire pour une préférence. Pour éviter cela, il faut d'abord vérifier que la largeur est bien supérieure à 0 : largeur > 0 And largeur < 200.
La conclusion est donc plus nette que le simple constat d'instantané : le SVG obéit à la préférence, et l'application ne le saura jamais. Aucune valeur ne franchit la frontière dans ce sens, ni par le contrôle Image, ni par le contrôle Texte HTML, dont la propriété HtmlText se contente de rendre la chaîne que votre propre formule a produite. Pour obtenir un vrai booléen dans Power Fx, il faut un composant de code (PCF) et son window.matchMedia.
Ce point se vérifie également avec la méthode présentée en section 4. La démonstration tient sur un seul écran, dans l'app publiée : deux  affichent le même SVG côte à côte, l'un avec gblBust dans sa chaîne et l'autre sans. On désactive les animations dans Windows sans fermer l'app, on déclenche le bust, puis on observe le résultat.



Voie
Chemin emprunté par le CSS
Canari
Verdict lu




A
balise

Blog de Nelson Boruchowitch