Images

    Les images qui accompagnent le texte sont de nature informationnelle, c’est-à-dire qu’elles renforcent l’information du contenu principal. Les visuels qui ne servent qu’à embellir ne sont pas justifiés.

    Quand les utiliser

    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 Cet hyperlien s'ouvrira dans une nouvelle fenêtre..

    Exemple d’images à NE PAS utiliser



    Comment les 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 « © ».

    Informations techniques

    Taille des images et ratio

    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


    Images en dehors des ratios recommandées

    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

    Texte dans les images

    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


    Position et harmonisation des images de même nature

    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



    Légende et source des images

    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. 

    CSS de la légende
    color: #223654;
    font-family: Open Sans;
    font-size: 0.875rem;
    line-height: 1.375rem;

    CSS du cadre
    background-color: #f2f1f1;

    Dernière mise à jour : 24 août 2023

    Évaluation de page

    L’information sur cette page vous a-t-elle été utile?
    Avis général

    Des questions ou besoin de renseignements?

    Communiquez avec Services Québec