Images et photographie

Principe directeur : Inclure uniquement les éléments qui ont un sens.

---

À propos de cet élément

Les images et les photos doivent être utilisées avec parcimonie, uniquement lorsqu’elles ajoutent un sens au contenu ou aident les gens à accomplir une tâche.

Quand utiliser des images

Ce qu’il faut faire

• utiliser des images pour illustrer des choses concrètes (par exemple, des animaux, des cartes d’identité, des vignettes d’immatriculation) et non des concepts abstraits (par exemple, lumière, holistique, synergie)
• utiliser la marque de l’identité visuelle de l’Ontario (logos et graphiques de campagne de marketing approuvés) et les marques ontariennes approuvées (par exemple, ServiceOntario)
• utiliser des images pour illustrer la hiérarchie du contenu en utilisant des bannières hautes sur les pages d’entrée (pages d’accueil, page d’atterrissage d’une campagne de marketing), des bannières étroites sur les pages d’atterrissage des sujets de haut niveau et aucune bannière sur les pages des sous-sujets ou des articles
• optimiser les images pour le Web afin de réduire autant que possible la taille des fichiers tout en maintenant une qualité raisonnable

Ce qu’il ne faut pas faire

• utiliser des images de texte, à l’exception des logos pour lesquels la préservation de la police de caractères est essentielle, ou des cartes et des graphiques - les images de texte créent des obstacles pour les utilisateurs d’appareils mobiles et les personnes malvoyantes
• développer une nouvelle marque pour un programme ou une page - utiliser plutôt l’identité visuelle de l’Ontario
• déformer ou modifier fortement les images associées à l’identité visuelle de l’Ontario
• utiliser des images qui n’ont aucun rapport avec le sujet de la page
• utiliser des images trop petites pour montrer des détails importants, surtout si elles sont visionnées sur des appareils mobiles
• mettre du texte sur des images

---

Tailles et formats d’images

Les dimensions des fichiers images dans les tableaux ci-dessous sont compatibles avec toutes les résolutions d’écran au nombre de colonnes indiqué.

Autres tailles d’images

---

Compression d’images et formats de fichiers

Compression de fichiers images

Comprimez toujours une photo avant de la télécharger sur le Web. La compression d’images est un facteur important pour la convivialité, car elle permet un chargement plus rapide des pages lorsque la connexion Internet est lente.

Nous recommandons de comprimer les fichiers JPEG à un niveau de qualité d’au moins 84 %.

• Redimensionnement des fichiers PNG/JPEG : https://resizeimage.net/
• Compression des fichiers PNG/JPEG : https://tinypng.com/
• Compression des fichiers SVG : https://vecta.io/nano

Formats de fichiers images

Pour les photographies et les images complexes, utilisez les formats JPG ou JPEG.

Pour les grandes illustrations qui contiennent des blocs de même couleur, les formats PNG ou SVG sont optimaux.

Pour les illustrations ou les photographies qui comportent des sections transparentes, les formats PNG ou SVG sont optimaux.

Pour les icônes et les illustrations, nous recommandons un format de fichier SVG.

---

Photographie

Utilisez la photographie pour créer un lien plus étroit avec votre public.

La photographie doit :

• sembler authentique, humaine, réelle, et éviter de donner l’impression de provenir d’une banque d’images
• exprimer tout un éventail de sujets et de services
• être inclusive et représentative de tous les Ontariens

Où trouver des photos

Ce qu’il faut faire

• consulter la photothèque de l’Ontario. La photothèque peut être utilisée par le personnel de la FPO dans les ministères, agences, conseils et commissions du gouvernement. Les images sont libres de redevances et protégées par le droit d’auteur de la Couronne.
• essayer de trouver des images prises en Ontario, ou des images d’Ontariens
• s’assurer que toutes les photos provenant d’une banque d’images sont payées et utilisées sous licence par le gouvernement de l’Ontario
• obtenir l’autorisation du photographe si vous utilisez une photo personnelle - vous pouvez ajouter un crédit photo dans une légende

Ce qu’il ne faut pas faire

• utiliser des photos dont vous ne connaissez pas la source, le propriétaire, le droit d’auteur ou l’origine
• utiliser les moteurs de recherche pour trouver des images qui ne sont pas explicitement disponibles pour une licence ou une utilisation
• utiliser des images qui contiennent des filigranes, ou modifier les images pour supprimer les filigranes

Thèmes à prendre en compte lors de la recherche de photos

Essayez d’utiliser des photos qui correspondent aux thèmes suivants :

Résidents de l’Ontario au travail – une dynamique forte, engagée et positive

Fierté en Ontario – confiance et sentiment d’appartenance

Gens de tous les jours – optimisme, collaboration

Centré sur le service – fiable, attentionné et personnel

Styles de photographie

Primaire

Secondaire

---

Accessibilité des textes et images de remplacement

Chaque image doit avoir un attribut ALT.

Évitez d’utiliser des images pour présenter le contenu du texte. Le contenu du texte doit être écrit en HTML.

Quand ajouter du texte de remplacement

Le texte de remplacement offre une option de remplacement aux images, photographies et autres contenus non textuels.

Si une image est décorative et ne fournit aucune information supplémentaire, l’attribut <alt> doit être vide. Une façon de déterminer si une image est décorative est de rédiger le texte de remplacement, puis de décider s’il ajoute une valeur supplémentaire pour l’utilisateur.

Exemples de texte de remplacement :

• texte de remplacement qui apporte une valeur ajoutée : « Le ministre de la Santé serre la main d’un participant à la conférence »
• texte de remplacement qui n’apporte pas de valeur ajoutée : « Carré bleu » (l’image est décorative)

Rédaction de texte de remplacement

Ce qu’il faut faire

• décrire l’image avec précision
• écrire ce qui est nécessaire pour couvrir les informations et la signification que l’image fournit
• décrire la fonction, le contenu et le contexte de l’image
• inclure les détails qui sont importants pour le récit et le sujet de la page
• être bref et concis - une phrase courte suffit souvent, mais au besoin, employer deux phrases au maximum

Ce qu’il ne faut pas faire

• répéter l’information dans le texte de remplacement si l’image est entourée de contenu offrant déjà la même information - c’est redondant et ajoute un « fouillis » d’informations pour les utilisateurs d’appareils fonctionnels
• utiliser des phrases comme « image de … » ou « graphique de … » - les utilisateurs sauront déjà qu’ils sont concentrés sur un élément d’image

---

Accessibilité des images SVG

Les conseils relatifs à l’accessibilité des textes Alt et des images s’appliquent également aux images SVG, mais il y a quelques considérations supplémentaires à garder à l’esprit avec les SVG.

Images informatives

Une image est « informative » lorsqu’elle transmet visuellement une information qui n’est pas fournie d’une autre manière. Une icône sans texte est un exemple d’image informative.

Pour les images SVG informatives :

• définir role="img" pour s’assurer que les lecteurs d’écran annoncent « image » au lieu du chemin d’accès à l’image
• fournir un texte alternatif décrivant l’image en utilisant soit aria-label="[description]" soit alt="[description]"

Images décoratives

Une image est dite « décorative » si elle rehausse visuellement le contenu textuel de la page sans fournir d’informations supplémentaires. Une icône associée à une étiquette de texte est considérée comme décorative, car l’étiquette de texte rend le contenu accessible. La duplication du texte dans l’image serait répétitive pour les utilisateurs de technologies d’assistance.

Pour les images SVG décoratives :

• les masquer en utilisant aria-hidden="true"
• les rendre inaccessibles à la focalisation en utilisant focusable="false"