Canvas API : usages courants et contexte de confidentialité

Canvas API permet à une page Web de dessiner des graphiques dans un élément HTML canvas à l’aide de JavaScript. C’est un outil courant du navigateur pour les graphiques, les illustrations, l’animation, les graphismes de jeu et les expériences multimédias. Réfléchir à la confidentialité de Canvas API commence par l’objectif de la page : ce qu’une personne doit voir ou faire, les informations nécessaires à ce résultat et ce qui doit rester disponible si la couche visuelle ne peut pas être utilisée.

Canvas est une surface de rendu, pas une interface complète à elle seule. Une image bitmap peut montrer un graphique ou une scène de jeu, mais elle ne décrit pas automatiquement chaque objet dessiné à un lecteur d’écran et ne rend pas chaque région interactive accessible au clavier. Canvas respecte aussi les limites de sécurité du navigateur lorsque du contenu provenant de différentes origines est utilisé. Un usage responsable associe donc un objectif visuel clair, des informations équivalentes et accessibles, un contenu de remplacement adapté et le respect des restrictions d’origine de la page.

Pour comprendre la technique de suivi et ses effets sur la confidentialité, consultez l’article sur le fingerprinting par Canvas. L’usage courant de Canvas API exige toujours des résultats clairs pour l’utilisateur, des solutions accessibles et une attention au contexte dans lequel le navigateur affiche le contenu. Pour un contexte plus large sur les surfaces du navigateur, du site, du compte et du réseau, consultez le guide de confidentialité entre les différentes surfaces du navigateur.

Comprendre les usages de Canvas

Un élément HTML canvas fournit une image bitmap que les scripts peuvent mettre à jour pendant l’exécution d’une page. Le standard HTML WHATWG le décrit comme une surface de dessin dont la résolution varie et qui permet de produire dynamiquement des graphiques, des graphismes de jeu, des œuvres artistiques ou d’autres images. MDN décrit également Canvas API comme un moyen de dessiner des graphiques avec JavaScript et l’élément canvas, principalement en deux dimensions. Ces descriptions sont un point de départ utile : Canvas sert à créer du contenu visible et des interactions dans une page.

Un graphique est un exemple simple. Une page peut dessiner des barres, des lignes, des étiquettes ou une vue semblable à une carte afin d’aider une personne à comprendre un ensemble d’informations. La question importante n’est pas seulement de savoir si le dessin apparaît. Il faut aussi que l’utilisateur puisse comprendre les valeurs, distinguer les catégories pertinentes et accéder à la même conclusion sous une autre forme lorsque l’image bitmap ne convient pas. Le résultat visuel doit servir la tâche plutôt que devenir le seul endroit où son sens existe.

L’animation est un autre usage courant. Une page peut mettre à jour une scène au fil du temps pour communiquer un changement, montrer un mouvement ou rendre une interaction plus réactive. Le mouvement peut clarifier une transition, mais aussi distraire ou créer un inconfort. Une expérience responsable permet de suspendre ou de réduire les mouvements non essentiels et évite que des consignes importantes dépendent uniquement du visionnage d’une animation. L’interface doit rester compréhensible lorsque le mouvement s’arrête.

Les jeux et les illustrations interactives utilisent Canvas pour redessiner une scène lorsque la personne agit. La surface visuelle peut comprendre une aire de jeu, des objets mobiles ou un score qui évolue. Des commandes et des indications d’état compréhensibles restent nécessaires autour de cette surface. La personne doit savoir comment commencer, suspendre, reprendre et comprendre le résultat. Si l’interaction au clavier est importante, la page doit établir une correspondance utile entre les régions interactives visibles et les commandes pouvant recevoir le focus, sans supposer que les pixels suffisent à donner accès au contenu.

Canvas peut également participer à des expériences de photo ou de vidéo en temps réel. Une page peut afficher une image, appliquer un effet visible ou superposer des graphiques à un média. L’objectif doit être clair pour l’utilisateur, en particulier lorsque le média est capturé, modifié ou enregistré. Expliquez quand la page utilise l’entrée de la caméra, quand un traitement est en cours et si le résultat est enregistré ou envoyé ailleurs. Ne laissez pas la personne le déduire de la seule présence d’une image en mouvement.

Dans chaque cas, partez du résultat et de l’action attendus par l’utilisateur. Demandez-vous si le visuel doit évoluer en continu, si les personnes doivent en sélectionner ou manipuler des parties et si une image statique ou du HTML sémantique serait plus simple. Canvas est utile lorsque le dessin ou les mises à jour répétées conviennent à la tâche. Ce n’est pas automatiquement le bon choix pour un contenu qui peut être exprimé clairement par du texte, un tableau ou des éléments ordinaires de la page.

Partir de l’objectif facilite aussi l’explication de la fonction, l’essai de solutions alternatives et le choix des données fournies par l’utilisateur qui doivent rester disponibles après l’interaction.

Rendre le résultat visuel accessible

Le contenu Canvas est essentiellement une image bitmap. Le navigateur peut afficher les pixels, mais le dessin n’expose pas automatiquement aux technologies d’assistance le sens de chacun de ses objets. Un graphique composé uniquement de pixels peut sembler clair tout en ne fournissant aucune valeur exploitable à un lecteur d’écran. Le texte dessiné dans une image bitmap peut également être difficile à agrandir, sélectionner, traduire ou modifier. Prévoyez une représentation équivalente dans la fonction, et non comme une réparation après la création du visuel.

Pour un graphique, fournissez les valeurs sous-jacentes ou un résumé textuel concis dans la page. Un tableau de données peut donner les valeurs exactes, tandis qu’une courte explication expose la tendance ou la conclusion principale. Ces alternatives doivent correspondre aux informations du dessin et rester à jour lorsque celui-ci change. Si les utilisateurs peuvent filtrer le graphique, veillez à ce que le texte ou le tableau reflète la vue sélectionnée plutôt qu’un autre état.

Pour une carte ou un diagramme, indiquez les relations importantes plutôt que de vous fier uniquement à la position visuelle. Une courte description peut expliquer l’itinéraire, le regroupement ou le changement à remarquer ; une liste ou un ensemble structuré de détails peut présenter les éléments individuellement. Synchronisez ces alternatives avec les commandes de sélection et de zoom. Les utilisateurs ne devraient pas avoir à reconstituer l’objectif du graphique à partir d’une étiquette décorative ou de différences de couleur inexpliquées ailleurs.

Pour un jeu ou une scène interactive, identifiez les actions et les résultats auxquels une personne doit accéder. Le standard HTML demande une correspondance univoque entre les régions interactives d’un canvas et des zones pouvant recevoir le focus lorsque le canvas est interactif. En pratique, les cibles visibles doivent avoir des commandes et des retours compréhensibles. Les personnes qui utilisent le clavier doivent pouvoir effectuer les mêmes actions importantes, et le focus doit être visible. Un score, un avertissement ou un résultat final ne doit pas exister uniquement sous la forme d’une couleur ou d’un bref changement visuel.

Utilisez du HTML sémantique pour les étiquettes, les consignes, les boutons et les messages d’état lorsqu’il convient. Canvas peut fournir la couche visuelle personnalisée, tandis que les éléments ordinaires apportent structure et noms accessibles. Cette répartition aide aussi lorsque le dessin ne se charge pas, qu’un script est indisponible ou qu’une personne utilise un outil qui n’interprète pas l’image bitmap. Une page accessible ne demande pas à tout le monde de percevoir la même surface visuelle de la même façon.

Tenez compte du contraste, de la taille du texte, de la dépendance à la couleur, du mouvement et du redimensionnement. Distinguez les séries d’un graphique autrement que par la couleur et gardez les étiquettes importantes lisibles à la taille réellement utilisée. Permettez de suspendre l’animation et conservez les commandes essentielles lorsque le dessin est redimensionné. Dans les expériences en temps réel, exposez l’état et les actions sans demander à la personne de suivre une scène en évolution constante. Ce sont des décisions de produit autour du dessin, et non des capacités fournies automatiquement par Canvas.

Effectuez des tests avec les méthodes d’interaction et les technologies d’assistance pertinentes pour le public. Vérifiez que la description non visuelle correspond au graphique actuel, que les actions au clavier sont faciles à découvrir, que l’ordre du focus est logique et que les changements sont annoncés si nécessaire. Une vérification statique de l’accessibilité peut manquer un problème qui n’apparaît qu’après un filtrage, un redimensionnement, une pause ou la fin d’une tâche. Répétez les vérifications après toute modification importante du dessin ou de ses commandes.

Fournir un contenu de remplacement utile

Le contenu de remplacement est l’alternative fournie par la page lorsque la représentation visuelle de canvas n’est pas disponible. Le standard HTML définit la façon dont canvas peut présenter ce contenu lorsque l’élément ne peut pas être rendu sous forme d’image bitmap. Ce contenu doit être utile par lui-même : il peut expliquer l’objectif du visuel, fournir des données essentielles ou renvoyer vers une expérience équivalente. Une zone vide ou un message générique ne permet pas de réaliser la tâche.

Gardez les informations de remplacement alignées sur le dessin actif. Si un graphique reflète des données mises à jour, le texte alternatif, le tableau ou le résumé ne doit pas rester dans un état antérieur. Si une animation est suspendue, la page doit tout de même communiquer l’état pertinent. Si une scène de jeu change après une action, ses commandes accessibles et son état doivent décrire le résultat actuel. Traitez le contenu alternatif comme une autre présentation de la fonction, avec les mêmes responsabilités et le même mécanisme de mise à jour que le canvas.

Le contenu de remplacement et l’accessibilité sont liés, mais distincts. Un contenu affiché uniquement lorsque Canvas n’est pas pris en charge peut ne pas être accessible à un lecteur d’écran lorsque le canvas se rend correctement. À l’inverse, un nom accessible pour le canvas ne décrit pas nécessairement le graphique détaillé ou la scène interactive qu’il contient. Prévoyez une alternative adaptée aux deux situations : un comportement de remplacement utile et une expérience équivalente pour les personnes qui ne peuvent pas utiliser l’image bitmap présentée.

Envisagez plusieurs conditions de défaillance. La page peut se charger sans son script de dessin, un contexte de rendu peut être indisponible, une source multimédia peut manquer ou une ressource essentielle peut être bloquée. L’utilisateur doit tout de même comprendre le rôle de la fonction et la prochaine action possible. Si aucune expérience interactive équivalente n’est disponible, expliquez cette limite et ne présentez pas une surface non fonctionnelle comme si elle était complète.

Les solutions de remplacement sont aussi utiles sur les appareils à faible débit ou aux capacités limitées, dans les vues imprimées et dans les parcours où un graphique n’est pas la représentation la plus pratique. Un résumé textuel communique rapidement l’essentiel ; un tableau téléchargeable peut faciliter la suite du travail ; une image statique peut suffire pour une illustration non interactive. Choisissez les alternatives en fonction de la tâche de l’utilisateur plutôt que de considérer un format comme adapté à toutes les situations.

Rendez les choix de l’utilisateur visibles lorsque le visuel comporte des comportements facultatifs. Une personne peut préférer une vue statique, moins de mouvement, une représentation plus simple ou une commande de pause. Mémoriser une préférence peut assurer une continuité, mais expliquez où elle s’applique et permettez de la modifier ultérieurement. Ne déduisez pas une préférence générale d’une seule action lorsqu’un choix plus limité suffit au besoin immédiat.

Respecter les limites de sécurité du navigateur

Canvas fonctionne selon le modèle d’origine de la plateforme Web. Lorsqu’une page dessine certains contenus provenant d’une autre origine sans obtenir l’autorisation requise pour cette ressource, l’image bitmap du canvas n’est plus considérée comme origin-clean. Dans cet état, le standard HTML restreint l’accès à l’image bitmap et à sa sérialisation. Cette limite aide à empêcher une page d’utiliser canvas comme moyen sans restriction d’inspecter le contenu d’une autre origine.

Cette restriction n’est pas un défaut de rendu accidentel à contourner. Elle fait partie du modèle de sécurité pour le contenu dessiné depuis différentes origines. Si une fonction a besoin d’une image ou d’une ressource multimédia d’une autre origine, utilisez un mécanisme de partage pris en charge où le propriétaire de la ressource autorise explicitement l’accès prévu. Sinon, limitez l’expérience aux opérations qui ne nécessitent pas l’accès refusé par le navigateur et expliquez la limite si elle affecte la tâche.

Concevez le parcours en tenant compte de l’origine de la ressource et des autorisations attendues. Une page peut afficher un média sans être autorisée à traiter ses pixels comme des données lisibles localement ou exportables. Ce sont des capacités distinctes. Expliquez comment la page utilisera la ressource, obtenez les autorisations exigées par la plateforme et évitez de promettre que tout média affiché pourra aussi être modifié ou enregistré.

Pour les photos et les vidéos, expliquez les étapes visibles par l’utilisateur : sélectionner ou fournir un média, le prévisualiser, appliquer un effet puis enregistrer ou partager le résultat. Si l’expérience utilise une entrée en direct, proposez un moyen clair de la démarrer et de l’arrêter et signalez lorsqu’elle est active. Limitez le traitement à l’objectif demandé et ne conservez ni ne transmettez un résultat que si ce comportement fait partie de la tâche expliquée.

Permettez de distinguer facilement une action portant sur l’original d’une action portant sur un résultat séparé. L’aperçu d’un effet ne doit pas remplacer silencieusement un fichier fourni par l’utilisateur, et l’enregistrement doit rendre la destination et le format compréhensibles. Si la tâche peut être annulée, proposez un moyen clair de l’arrêter avant l’enregistrement ou le partage du résultat. Les personnes peuvent ainsi choisir en connaissance de cause pour leurs médias sans comprendre l’implémentation du rendu.

Lorsqu’une ressource est bloquée ou ne peut pas être utilisée selon les règles d’origine applicables, signalez clairement l’échec. Proposez une solution respectueuse de la politique du propriétaire, par exemple demander à l’utilisateur de choisir un fichier local lorsque cela convient à la tâche, ou afficher un aperçu non interactif si c’est approprié. Ne laissez pas entendre qu’une décision de conception de la page peut contourner la restriction du navigateur. Les limites de sécurité sont des contraintes de conception du produit, et non des obstacles à vaincre.

Concevoir et maintenir Canvas de façon responsable

Commencez la planification de la fonction par une brève description du résultat visible pour l’utilisateur. Précisez pourquoi Canvas convient, quelles données et quelles entrées multimédias la tâche nécessite, si le résultat évolue dans le temps et quelle représentation sans Canvas est disponible. Le périmètre de la fonction sera ainsi compréhensible pour les concepteurs, les développeurs et les utilisateurs. La discussion sur la confidentialité restera aussi liée à la tâche réelle plutôt qu’à des affirmations vagues sur une technologie.

Préférez la présentation la moins complexe qui réponde à l’objectif. Un tableau ou un graphique en HTML sémantique peut être plus facile à examiner et à adapter qu’une image bitmap personnalisée. Un dessin dynamique peut convenir à un jeu, une animation ou une visualisation interactive. La décision doit tenir compte de l’interaction, de l’adaptation, de l’accessibilité et de la maintenance, et pas seulement du style visuel ou de la commodité de l’implémentation.

Explicitez les choix concernant les entrées et la conservation. Indiquez aux personnes quand une fonction nécessite une image sélectionnée, une entrée caméra ou vidéo, ou des préférences enregistrées. Distinguez le traitement nécessaire à l’affichage du résultat demandé du stockage ou du partage facultatif. Laissez l’utilisateur contrôler le début et la fin de l’utilisation des médias et expliquez clairement ce qui se passe avant que des informations quittent le navigateur ou restent disponibles ensuite.

Assurez la cohérence de l’interface entre la présentation visuelle et ses alternatives. Les étiquettes, les commandes, l’état et le contenu de remplacement doivent utiliser des noms cohérents et décrire le même état. Lorsque le visuel est mis à jour, son équivalent textuel et le retour d’interaction doivent également l’être. Si une personne suspend une animation ou change de vue, communiquez cet état sans dépendre uniquement des pixels.

Réexaminez la fonction après tout changement d’objectif, de sources multimédias, de commandes utilisateur ou de prise en charge par le navigateur. Testez le parcours normal, le cas d’une ressource bloquée et les parcours d’accessibilité concernés. Vérifiez que le contenu de remplacement reste utile, que les limites d’origine sont respectées et que l’utilisateur peut savoir si les médias ou résultats sont actifs, locaux, enregistrés ou partagés. Ces vérifications favorisent une fonction responsable ; elles ne prouvent pas que toute préoccupation possible liée à la confidentialité a été éliminée.

Canvas est un moyen flexible de créer des graphiques dans le navigateur, mais une bonne implémentation ne se résume pas à une image bitmap qui s’affiche. Reliez le dessin à un objectif clair pour l’utilisateur, rendez son sens accessible sous une forme équivalente, préservez des solutions de remplacement utiles, respectez les limites origin-clean et expliquez ce qui arrive aux entrées et aux résultats fournis par les personnes. La fonction reste ainsi utilisable sans exagérer les garanties de l’API ou de ses propriétés de confidentialité.

Sources publiques

• Standard HTML WHATWG : l’élément canvas
• MDN : Canvas API