Images

À première vue, les images accessibles peuvent sembler un sujet simple : il suffit d'ajouter un texte alternatif à une image. Mais le sujet est plus nuancé que certains ne le pensent. Dans cette section, nous allons aborder les points suivants :

• Comment mettre à jour le code pour rendre les images accessibles
• Quelles informations partager avec les utilisateurs et où les partager
• Autres façons d'améliorer vos images pour les rendre accessibles aux personnes handicapées

Objectif et contexte de l'image

Avant même d'écrire une seule ligne de code, réfléchissez à l'objectif de l'image, à son emplacement et à son utilisation. En vous posant ces questions , vous pourrez déterminer la meilleure façon de transmettre les informations à une personne utilisant une technologie d'assistance (TA) , comme un lecteur d'écran.

Vous pouvez vous poser les questions suivantes :

• L'image est-elle essentielle pour comprendre le contexte de la fonctionnalité ou de la page ?
• Quel type d'informations l'image essaie-t-elle de transmettre ?
• L'image est-elle simple ou complexe ?
• L'image suscite-t-elle une émotion ou incite-t-elle l'utilisateur à agir ?
• Ou l'image est-elle simplement un "bonbon pour les yeux" sans réel objectif ?

Un organigramme visuel, tel qu'un arbre de décision d'image, peut vous aider à déterminer à quelle catégorie appartient votre image.

Essayez de masquer les images sur votre site ou votre application Web à l'aide d'une extension de navigateur ou d'autres méthodes. Posez-vous ensuite la question suivante : "Est-ce que je comprends le contenu qui reste ?" Si la réponse est oui, il s'agit très probablement d'une image décorative. Sinon, l'image est informative d'une manière ou d'une autre et nécessaire dans son contexte. Une fois que vous avez déterminé l'objectif de l'image, vous pouvez déterminer la manière la plus précise de la coder.

Images décoratives

Une image décorative est un élément visuel qui n'ajoute pas de contexte ni d'informations supplémentaires permettant à l'utilisateur de mieux comprendre le contexte. Les images décoratives sont complémentaires et peuvent apporter du style plutôt que du contenu.

Si vous décidez qu'une image est décorative, elle doit être masquée par programmation pour les technologies d'assistance. Lorsque vous programmez une image pour qu'elle soit masquée, vous signalez à la technologie d'assistance que l'image n'est pas nécessaire pour comprendre le contenu, le contexte ou l'action de la page. Il existe de nombreuses façons de masquer des images, y compris en utilisant un texte alternatif vide ou nul, en appliquant ARIA ou en ajoutant l'image comme arrière-plan CSS. Voici quelques exemples de masquage d'une image décorative pour les utilisateurs.

alt vide ou nul

Un attribut de texte alternatif vide ou nul diffère d'un attribut de texte alternatif manquant. Si l'attribut de texte alternatif est manquant, la technologie d'assistance peut lire le nom de fichier ou le contenu environnant pour fournir à l'utilisateur plus d'informations sur l'image.

Rôle défini sur presentation ou none

Un rôle défini sur presentation ou none supprime la sémantique d'un élément de l'exposition à l'arborescence d'accessibilité. Pendant ce temps, aria-hidden= "true" supprime l'élément entier (et tous ses enfants) de l' API d'accessibilité.

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

Utilisez aria-hidden avec précaution, car il peut masquer des éléments que vous ne souhaitez pas masquer.

Images en CSS

Lorsque vous ajoutez une image d'arrière-plan avec CSS, un lecteur d'écran ne peut pas détecter le fichier image. Assurez-vous de vouloir masquer l'image avant d'appliquer cette méthode.

Images informatives

Une image informative est une image qui transmet un concept, une idée ou une émotion. Les images informatives incluent des photos d'objets du monde réel, des icônes essentielles, des dessins simples et des images de texte.

Si votre image est informative, vous devez inclure un texte alternatif programmatique décrivant l'objectif de l'image. Les descriptions d'images alternatives, souvent abrégées en "texte alternatif", fournissent aux utilisateurs de technologies d'assistance plus de contexte sur une image et les aident à mieux comprendre le message ou l'intention d'une image.

Les descriptions alternatives des éléments <img> sont ajoutées en incluant l'attribut alt, quel que soit le type de fichier vers lequel il pointe, tel que .jpg, .png, .svg, etc.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

Toutefois, lorsque vous utilisez des éléments <svg> en ligne, vous devez faire attention à l'accessibilité.

Tout d'abord, étant donné que les SVG sont codés sémantiquement, les technologies d'assistance les ignorent par défaut. Si vous avez une image décorative, ce n'est pas un problème : la technologie d'assistance l'ignorera comme prévu. Mais si vous avez une image informative, un ARIA role="img" doit être ajouté au modèle pour que la technologie d'assistance la reconnaisse comme une image.

Ensuite, les éléments <svg> n'utilisent pas l'attribut alt. Vous devez donc utiliser d'autres méthodes de codage pour ajouter des descriptions alternatives à vos images informatives.

<svg role="img" ...>
  <title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>

Images fonctionnelles

Une image fonctionnelle est liée à une action. Par exemple, un logo qui renvoie à la page d'accueil, une loupe utilisée comme bouton de recherche ou une icône de réseau social qui vous redirige vers un autre site Web ou une autre application.

Comme les images informatives, les images fonctionnelles doivent inclure une description alternative pour informer tous les utilisateurs de leur objectif. Contrairement à une image informative, chaque image fonctionnelle doit décrire l'action de l'image, et non les aspects visuels.

Dans l'exemple du logo, l'image est à la fois informative et exploitable, car elle transmet des informations et se comporte comme un lien. Dans ce cas, vous pouvez ajouter des descriptions alternatives à chaque élément, mais ce n'est pas obligatoire.

Vous pouvez ajouter des descriptions alternatives aux images à l'aide de texte masqué visuellement. Lorsque vous utilisez cette méthode, le texte est lu par les lecteurs d'écran, car il se trouve dans le DOM, mais il est masqué visuellement à l'aide de CSS personnalisé.

Dans l'extrait de code, "Accéder à la page d'accueil" est le titre du wrapper, et le texte alternatif de l'image est "De jolies coccinelles pour votre pelouse". Lorsque vous écoutez le code du logo avec un lecteur d'écran, vous entendez à la fois l'élément visuel et l'action transmis dans une seule image.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

Images complexes

Une image complexe nécessite souvent plus d'explications qu'une image décorative, informative ou fonctionnelle. Elle nécessite une description alternative courte et longue pour transmettre l'intégralité du message. Les images complexes incluent les infographies, les cartes, les graphiques et les illustrations complexes.

Comme pour les autres types d'images, vous pouvez utiliser différentes méthodes pour ajouter des descriptions alternatives à vos images complexes.

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

Pour ajouter des explications supplémentaires à une image, vous pouvez créer un lien vers une ressource ou fournir un lien de saut vers une explication plus longue plus loin sur la page. Cette méthode est un bon choix, non seulement pour les utilisateurs de technologies d'assistance, mais aussi pour les personnes ayant un handicap (handicaps cognitifs, d'apprentissage et de lecture, par exemple) qui peuvent bénéficier de ces informations supplémentaires sur l'image directement disponibles à l'écran au lieu d'être enfouies dans le code.

Une autre méthode consiste à ajouter l'attribut aria-describedby à l'élément <img>. Vous pouvez lier l'image par programmation à un ID contenant une description plus longue. Cette méthode crée une association forte entre l'image et la description complète. La description étendue peut être affichée à l'écran ou masquée visuellement, mais pensez à la laisser visible pour aider encore plus de personnes.

Une autre façon de regrouper des descriptions alternatives courtes avec une description plus longue consiste à utiliser les<figure> et <figcaption> éléments. Ces éléments agissent de la même manière que aria-describedby en ce qu'ils regroupent sémantiquement des éléments, ce qui crée une association plus forte entre l'image et sa description.

L'ajout d'ARIA role="group" assure la rétrocompatibilité avec les anciens navigateurs Web qui ne prennent pas en charge la sémantique de l'élément <figure>.

Bonnes pratiques concernant le texte alternatif

Bien sûr, il ne suffit pas d'inclure un texte alternatif. Le texte doit également être pertinent. Par exemple, si votre image représente un essaim de coccinelles qui rongent les feuilles de votre rosier primé, mais que votre texte alternatif indique "insectes", cela transmet-il l'intégralité du message et de l'intention de l'image ? Absolument pas.

Les descriptions alternatives doivent capturer autant d'informations visuelles pertinentes que possible et être succinctes. Bien qu'il n'y ait pas de limite au nombre de caractères qu'un lecteur d'écran peut lire, il est généralement conseillé de limiter votre texte alternatif à 150 caractères ou moins pour éviter la fatigue du lecteur. Si vous devez ajouter du contexte à l'image, vous pouvez utiliser l'un des modèles d'image complexes, ajouter un texte de légende ou décrire plus en détail l'image dans le corps du texte principal.

Voici quelques bonnes pratiques supplémentaires concernant le texte alternatif practices :

• Évitez d'utiliser des mots tels que "image de" ou "photo de" dans la description, car le lecteur d'écran identifiera ces types de fichiers pour vous.
• Lorsque vous nommez vos images, soyez aussi cohérent et précis que possible. Les noms d'image sont une solution de secours lorsque le texte alternatif est manquant ou ignoré.
• Évitez d'utiliser des caractères non alphabétiques (par exemple, #, 9, &) et utilisez des tirets entre les mots plutôt que des traits de soulignement dans les noms d'image ou le texte alternatif.
• Utilisez une ponctuation appropriée chaque fois que cela est possible. Sans cela, les descriptions d'image ressembleront à une longue phrase sans fin.
• Écrivez un texte alternatif comme un humain, et non comme un robot. L'accumulation de mots clés n'est bénéfique pour personne : les personnes utilisant des lecteurs d'écran seront agacées, et les algorithmes des moteurs de recherche vous pénaliseront.