Images

Tout élément visuel (par exemple, tableau, photo, iconographie) est utilisé pour fournir des renseignements supplémentaires et pour faciliter la compréhension de l’information.

On n’utilise pas d’images décoratives ou « traitées artistiquement », sauf dans le cas des pages d'atterrissage de campagnes .

Exemple d’images à NE PAS utiliser

Un texte de remplacement (ou texte Alt) décrit une image pour les personnes qui utilisent des technologies d'aide. Il permet aussi aux moteurs de recherche de mieux déchiffrer l'intention des fichiers d'image. 

Afin de rédiger un texte alternatif pour des images fonctionnelles, il faut :

• décrire l'image comme si on la décrivait à quelqu'un au téléphone;
• utiliser le moins de mots possible;
• limiter le texte à moins de 170 caractères (y compris les espaces);
• utiliser le texte qui figure sur une image fonctionnelle comme texte alternatif seulement s'il fournit suffisamment de contexte, ou rédiger un autre texte en incluant plus d'information;
• éviter de décrire une image par le même mot (exemple : « image du... »), car les lecteurs d'écran le font déjà.

On utilise l'indicateur vide (alt="") comme texte alternatif si l'image ne donne pas plus de renseignements que ce qui est déjà inscrit dans le texte avoisinant (elle sera ignorée par les outils d’assistance).

Le nom de l’auteur d’une image ou du propriétaire des droits de reproduction apparaît sous l’image et est précédé du symbole « © ».

Taille des images et ratio

La largeur des images doit se situer entre 156 px et 714 px.

Tous les ratios peuvent être utilisés, tant que l’image respecte les autres recommandations de cette fiche.

Trois ratios sont toutefois recommandés : 1:1, 3:2 et 16:9.

Ils permettent d’éviter certains problèmes de lisibilité et d’accessibilité, tout en conservant une cohérence visuelle au fil des contenus.

Exemple

Dans l'exemple qui suit, l'image n'utilise pas un ratio recommandé.
Une fois redimensionnée sur mobile, il sera difficile de la consulter.

À ne pas faire

Dans cette situation, la solution est de revoir la disposition des éléments qui composent l’image. Le redimensionnement, sur mobile, d’une image qui est claire au format bureau peut entraîner des contraintes de lisibilité et d’accessibilité.

Exemple d’image, découpée en trois parties et placée au ratio 16:9
 

À faire

Les images peuvent être intégrées en dehors des ratios recommandés si elles respectent les critères de taille, de lisibilité et d’accessibilité.

Exemple d’une image en dehors des ratios recommandés

Pour cette image, le recadrage dans un des ratios proposés créait de grandes marges vides. Comme l’image ne contient pas de texte essentiel à sa compréhension et que les zones d’étiquetage restent visibles même après redimensionnement sur un mobile, on peut l’intégrer sans revoir son ratio.

Voici la même image, au format d’un mobile d’une largeur de 320 px

Il faut éviter de placer du texte dans les images. Seul le texte essentiel à la compréhension de l’image devrait s’y trouver, et dans une taille qui ne nuit pas à sa lecture sur mobile.

La description de l’image peut être placée dans les éléments qui l’entourent : le titre, la légende et le contenu.

À ne pas faire

À faire

Les images sont alignées à la gauche. Si des images sont placées côte à côte, elles doivent avoir une gouttière de 32 px et être du même format.

Il est conseillé d’harmoniser les tailles et les ratios des images qui sont de même nature. 

À faire

À ne pas faire

Une légende peut être ajoutée à l’image. Elle apparaît sous l’image, dans un cadre gris.

La source peut aussi y être placée, en italique, à la suite de la légende.

Le cadre se place 8 px sous l’image et il doit comporter des marges verticales et horizontales de 8 px autour du texte.