Créer des ressources accessibles : Images et icônes

Rendre votre site web accessible, c’est s’assurer que tous les visiteurs, y compris ceux qui souffrent de déficiences visuelles, peuvent profiter pleinement de votre contenu. Cet article explique comment utiliser les images et les icônes d’une manière qui respecte les normes d’accessibilité en ajoutant un texte de remplacement, en utilisant des éléments visuels significatifs et en évitant les pièges les plus courants. Suivez ces bonnes pratiques pour créer des ressources inclusives et conviviales pour votre site web ou votre page de renvoi.

Exigences

• Toutes les images et icônes porteuses d’informations doivent être accompagnées d’un texte alternatif décrivant le contenu de l’image ou de l’icône
  • Le texte alternatif ne doit pas contenir de mots identifiant l’élément comme un graphique ou une image (par exemple, évitez les phrases telles que “graphique de” ou “image de”, etc.) car les lecteurs d’écran énoncent déjà le rôle (par exemple, en disant “graphique” et en lisant ensuite le texte alternatif).
  • Évitez d’utiliser les majuscules, car certains lecteurs d’écran lisent chaque lettre
  • Nécessaire pour :
    • les images utilisant <img>
    • les images actives
    • les images de saisie de formulaire
    • Les SVG utilisant <img>.
    • SVG utilisant <SVG>
    • HTML5 canvas
    • polices d’icônes
• Les descriptions Alt text doivent apporter un contexte à l’utilisateur et être significatives
  • Les liens image/icône doivent décrire la destination du lien.
  • L’image/l’icône des liens de type bouton/contrôle doit décrire l’objectif du bouton ou du contrôle et/ou l’action qui en résulte.
  • La longueur du texte alternatif pour les images/icônes informatives doit être concise (pas plus de 250 caractères)
• Le texte alternatif doit être localisé en fonction de la langue utilisée sur la page.
• N’utilisez pas de texte dans les images si vous pouvez utiliser du texte réel à la place, sauf s’il est essentiel (comme un logo) ou si vous avez besoin de polices, de tailles, de couleurs ou d’arrière-plans spécifiques.
• S’il est nécessaire d’utiliser l’image d’un texte, suivez les lignes directrices en matière de couleur et de contraste.
• Si une image d’arrière-plan contient des informations utiles, un texte alt doit être ajouté (par exemple, par le biais d’un texte visible normal, en ajoutant role="image" et aria-label, ou par d’autres moyens).
• Si un texte est superposé à une image, testez le contraste du texte superposé avec au moins 8 couleurs de l’image.
• Prévoyez des contrôles (boutons de pause, flèches) pour les contenus qui démarrent automatiquement, tels que les carrousels, les curseurs d’image et les vidéos d’arrière-plan.
• Ne faites pas jouer les carrousels automatiquement.
• N’utilisez pas de boutons fantômes sur les images (boutons sans arrière-plan ni contour).
• Aucun contenu ne doit clignoter plus de trois fois par seconde.
• Les objets graphiques tels qu’une icône autonome, un graphique ou une image doivent présenter un contraste minimal de 3:1 entre l’élément et son arrière-plan.
• Les icônes utilisées sur plusieurs pages doivent avoir la même signification et la même fonctionnalité.
• Si nous utilisons une icône spécifique pour déclencher une action (par exemple, une flèche vers le bas pour les menus déroulants ou les accordéons/développements), nous ne l’utilisons pas de manière décorative sur une autre page.

Exceptions

Images ou icônes décoratives ou redondantes

Lorsque des images n’ont aucune utilité sur le plan du contenu, sont purement décoratives ou dupliquent des informations déjà transmises dans un texte, il est recommandé de leur attribuer un texte alternatif nul (vide)(alt="), de leur attribuer le rôle ARIA "presentation" ou de les utiliser en tant qu’arrière-plan CSS.

Images d’arrière-plan décoratives ou redondantes

Ne donnez pas de texte alternatif pour les images d’arrière-plan qui ne sont pas importantes et qui n’apportent pas d’informations à l’utilisateur.

Exemples

	OUI: Le texte alt fournit un contexte et des informations : “Femme d’âge mûr travaillant sur un ordinateur portable, portant une tenue de bureau et souriante, debout sur un fond blanc”. NON: Une description n’est pas assez précise : “femme mûre”.
	L’icône est porteuse d’informations et importante pour l’utilisateur. Texte en alt : “icône facebook”, “icône Instagram”, “icône Pinterest”.
	Sur la page, il y a six descriptions avec une icône illustrative. Ces images sont des images décoratives. Nous définissons cela en ajoutant un attribut alt vide : <img src="filename.png" alt="">. Les technologies d’assistance, comme les lecteurs d’écran, ignorent alors l’image. Sans l’attribut alt vide, un lecteur d’écran peut lire le nom du fichier, ce qui n’a aucun sens et déroute l’utilisateur.
	Dans cet exemple, le logo a deux fonctions : indiquer aux utilisateurs sur quel site ils se trouvent et fournir un lien vers la page d’accueil. OUI: Décrivez l’image et son rôle, par exemple en utilisant aria-label-"GetResponse homepage".