L'utilisation d'images pour présenter des informations et ajouter une dynamique visuelle à votre site de participation citoyenne est un excellent moyen de créer un environnement accueillant pour vos parties prenantes. Cependant, vous devez utiliser les images de façon correcte et en gardant à l'esprit l'accessibilité.

Toutes les images utilisées en ligne doivent être accompagnées d'un texte alternatif, à moins qu'elles ne soient décoratives. Les lecteurs d'écran utilisent le texte alternatif pour transmettre l'information ou la fonction des images. Cet article présente les différents objectifs des images, les endroits où les utiliser dans EngagementHQ et les meilleures pratiques en matière d'accessibilité lors de l'ajout du texte alternatif.

Les images ont plusieurs objectifs principaux dans EngagementHQ :

Les images informatives représentent graphiquement des concepts et des informations, telles que des images, des photos et des illustrations. L'utilisation de ces images nécessite une description en texte alternatif des informations essentielles contenues dans l'image.

Les images informatives sont généralement utilisées dans le widget de la galerie de photos et dans le cadre de la description d'un projet. Le texte alternatif des images informatives doit décrire de manière précise les éléments suivants :

Voici un exemple d'image informative qui nécessiterait un texte alternatif pour décrire l'émotion qu'elle suscite. Par exemple, « une femme sautant joyeusement sur fond de coucher de soleil ».

L'objectif des Images décoratives est d'ajouter une décoration visuelle à une page plutôt que de fournir des informations essentielles à la compréhension de cette page. Il s'agit généralement d'icônes et d'images présentées dans les listes de projets sur la page d'accueil.

Ces images apportent une décoration visuelle à côté des informations textuelles adjacentes. Les images utilisées à ces endroits ne doivent pas contenir d'images de texte et doivent avoir un attribut texte alternatif vide. Cela permet de s'assurer que seules les informations pertinentes pour l'utilisateur sont lues à haute voix lorsqu'un lecteur d'écran parcourt la page.

Vous trouverez ci-dessous un exemple d'images décoratives utilisées dans les sections de l'éditeur d'Apparence.

Une image fonctionnelle a un but et une action directs, telles que les icônes des réseaux sociaux, le widget de la bannière d'inscription ou un logo lié par un hyperlien. Le texte alternatif de ces images doit décrire ce que fait l'image.

Le texte alternatif des images fonctionnelles fournies par EngagementHQ, telles que les icônes de partage social, comporte déjà les descriptions correctes. Toutefois, si les utilisateurs ajoutent leurs propres images à des fins pratiques, un texte alternatif décrivant cette fonction devra être fourni.

En règle générale, il faut l'éviter, mais il arrive que des images contiennent du texte lisible. Un texte réel est beaucoup plus accessible qu'une image contenant du texte, et vous devriez communiquer l'information de cette manière. Si vous devez utiliser une image contenant du texte, vous devez fournir un texte alternatif du même contenu.

Vous devez utiliser les bannières et autres images de EngagementHQ à des fins informatives ou décoratives et ne pas afficher d'images contenant du texte. Vous trouverez ci-dessous une image montrant deux options de présentation d'une image de bannière dans EngagementHQ. L'image du haut avec le texte et la description adjacents utilisant l'image de manière décorative est la bonne façon de présenter la bannière. Dans la deuxième option, vous pouvez voir comment le texte est inclus dans l'image. Le texte de cette image ne peut pas être lu par un lecteur d'écran ou indexé par un moteur de recherche.

Vous devrez peut-être utiliser des Images Complexes pour communiquer des informations complexes, telles que des graphiques, des organigrammes, des infographies, des diagrammes, des illustrations et des cartes.

Pour être accessibles, les images contenant de grandes quantités d'informations détaillées comme celles-ci doivent être accompagnées d'un texte alternatif en deux parties :

Les auteurs de contenu négligent souvent les descriptions longues, qui sont pourtant essentielles pour que tous les visiteurs de votre site puissent accéder au contenu et aux informations de manière accessible.

Vous trouverez ci-dessous un exemple d'image complexe nécessitant une description textuelle importante pour transmettre l'information aux participants utilisant des lecteurs d'écran. Vous ne devez utiliser des images complexes que dans le cadre d'un projet ou d'une page statique sur EngagementHQ.

Pour plus d'informations sur l'utilisation d'un texte alternatif avec différents types d'images, nous recommandons les tutoriels d'accessibilité au web de la Web Accessibility Initiative (Initiative pour l'Accessibilité au Web).

En savoir plus sur les images :