Images et Accessibilité : Guide de restitution pour lecteurs d’écran

Les images peuvent jouer un rôle crucial dans l’amélioration de l’expérience de l’utilisateur sur un site web. Elles peuvent donner une explication visuelle des concepts, montrer des réalités, évoquer des émotions et ajouter de l’esthétique au contenu d’une page web.

Si elles sont bénéfiques pour de nombreaux utilisateurs, elles peuvent poser des problèmes d’accessibilité pour d’autres, en particulier pour les personnes souffrant de déficiences visuelles et qui utilisent des lecteurs d’écran pour naviguer sur le web.

Une image, aussi belle et informative soit-elle, n’est pas utile si une personne ne peut la voir. Il faut donc qu’elle soit rendue accessible par des descriptions textuelles supplémentaires, appelées alternatives textuelles.

Les balises

Dans le domaine de la conception web, l’integration d’images se fait à travers diverses balises. Parmi elles, deux se démarquent : la balise ‘img’ et la balise ‘svg’.

img

La balise <img> est utilisée pour intégrer une image dans une page HTML. Contrairement à ce que l’on pourrait penser, les images ne sont pas techniquement insérées dans une page Web, mais plutôt liées à celle-ci.

La balise <img> a besoin de deux attributs pour fonctionner : src pour indiquer où se trouve l’image et alt pour décrire l’image si elle ne peut pas être affichée.

svg

La balise <svg> sert à intégrer des images vectorielles dans une page HTML. Ces images sont définies en utilisant des formes géométriques comme des lignes et des courbes, plutôt que des pixels. Pour ajouter une image SVG dans une page HTML, il suffit d’utiliser la balise <svg> et de définir les formes géométrique à l’intérieur de cette balise.

Image décorative

Une image décorative est une image qui n’apporte pas d’information supplémentaire par rappoprt au contenu environnant. Elle est utilisée uniquement pour des raisons esthétiques et ne contribue pas à la compréhension du contenu de la page.

Les images décoratives peuvent être des images d’arrière-plan, des bordures, des éléments d’espacement ou des graphiques qui sont déjà expliqués dans le texte.

Balise img

Si l’image n’apporte aucune information à la compréhension du contenu, utilisez une <img alt= » »>

<img src= »/img/image.png » alt= » « />

L’utilisation d’un attribut alt vide fera en sorte que les lecteurs d’écran ignorent l’image et ne la lisent pas.

Balise SVG

Pour faire d’une image SVG une image purement décorative, utilisez l’attribut aria-hidden= »true » sur la balise <svg> pour indiquer aux technologies d’assistance que l’image est purement décorative et ne doit pas être lue.

Voici un exemple d’utilisation de l’attribut aria-hidden pour rendre une image SVG purement décorative :

<svg aria-hidden= »true » width= »100″ height= »100″>

<circle cx= »50″ cy= »50″ r= »40″ stroke= »black » strock-width= »3″ fill= »red » />

</svg>

Dans cet exemple, l’attribut aria-hidden= »true » ajoutée à la balise <svg> indique que l’image est décorative.

Image Informative Simple

Une image informative est une image qui véhicule une information supplémentaire par rapport au contenu environnant. Elle peut être utilisée pour transmettre un concept ou une information simple qui peut être exprimée en une courte phrase.

Balise img

Si l’image est essentielle à la compréhension du contenu, renseignez l’attribut « alt » avec une alternative appropriée : alt= »@alternative ».

<img src= »/img/logo-entreprise-solidaire.png » alt= »Entreprise Solidaire d’utilité Sociale « />

Le lecteur d’écran lira l’alternative de l’image indiquée dans l’attribut.

Balise svg

Pour ajouter une alternative à une image SVG, vous pouvez utiliser l’attribut aria-label ou aria-labelledby sur la balise <svg> pour fournir un texte descriptif de l’image. Cela permet aux utilisateurs de technologies d’assistance tels que les lecteurs d’écran de comprendre le contenu de l’image. L’attribut aria-label permet de fournit un texte descriptif directement dans la balise <svg>, tandis que l’attribut aria-labelledby permet de faire référence à un élément existant sur la page qui contient le texte descriptif.

Il est aussi impératif de définir le svg comme une image en utilisant l’attribut role= »img ».

Exemple avec cette icône de flèche vers le haut

aria-label

Voici un exemple d’utilisation de l’attribut aria-label pour ajouter une alternative à une image SVG :

<svg role= »img » aria-label= »Retour vers le haut » width= »100″ height= »100″>

<circle cx= »50″ cy= »50″ r= »40″ stroke= »black » strock-width= »3″ fill= »red » />

</svg>

Dans cet exemple, l’attribut aria-label a été ajouté à la balise <svg> pour fournir une description textuelle de l’image. Le texte « Retour vers le haut » sera lu par les lecteurs d’écran pour décrire l’image aux utilisateurs.

aria-labelledby

Voici un exemple d’utilisation de l’attribut aria-labelledby pour ajouter une alternative à une image SVG :

<svg role= »img » aria-labelledby= »imageDescription » width= »100″ height= »100″>

<circle cx= »50″ cy= »50″ r= »40″ stroke= »black » strock-width= »3″ fill= »red » />

</svg>

<p id= »imageDescritption »>Retour vers le haut</p>

Dans cet exemple, nous avons ajouté l’attribut aria-labelledby à la balise <svg> pour lier l’image à une description textuelle. Les lecteurs d’écran liront cette description pour les utilisateurs.

Image Informative complexe

Une image informative complexe est une représentation visuelle détaillée utilisée pour transmettre des informations complexes de manière concise et compréhensible. Elle aide les utilisateurs à comprendre et à assimilier les informations plus facilement. Une infographie ou des diagrammes de données tels que le diagramme à barres et le diagramme en camembert sont des exemples d’image informative complexe et qui nécessitent une alternative pertinente et précise pour les technologies d’assistance.

Les utilisateurs malvoyants rencontrent des difficultés avec les images informatives car ils ne peuvent pas voir les informations visuelles comme les personnes voyantes.

Balise figure

L’élément HTML5 <figure> peut être utilisé pour enfermer à la fois l’image et sa description longue. La description longue (présentée sous forme d’en-têtes, de texte et d’un tableau) est enveloppée dans l’élément <figcaption>.

Elle est explicitement associée à l’image à l’aide de role= »group » sur l’élément <figure> qui la contient dans les navigateurs Web qui ne transmettent pas la sémantique de l’élément <figure>.

<figure role= »group »>

<img src= »chemin_de_limage.jpg » alt= »Description courte de l’image »>

<figcaption>Description longue de l’image</figcaption>

</figure>

En utilisant la balise <figure> avec la balise <figcaption>, vous indiquez aux navigateurs et aux technologies d’assistance que l’image et sa description sont liées et doivent être présentées ensemble, ce qui améliore la compréhension pour les utilisateurs malvoyants.

En résumé, les images sont cruciales pour améliorer l’expérience des utilisateurs sur un site web. Cependant, il est essentiel de les rendre accessibles à tous. Nous avons examiné comment les balises <img> et <svg> peuvent être utilisées pour cela.

• Pour les images décoratives, utilisez l’attribut alt= » » pour la balise <img> et l’attribut aria-hidden= »true » pour les balises <svg>.
• Pour les images informatives simples, utilisez un attribut alt= »@alternative » pour <img> et l’attribut aria-label ou aria-labelledby pour le <svg>.
• Pour les images informatives complexes, enveloppez-les dans une balise <figure> avec une description détaillée dans <figcaption>.

En suivant ces conseils, vous pouvez créer des sites web visuellement attrayants et accessibles à tous.