À première vue, les images accessibles peuvent sembler être un sujet rapide à aborder : il suffit d'ajouter un "texte alternatif" à une image, et le tour est joué. Mais le sujet est plus nuancé que certains ne le pensent. Dans cette section, nous allons aborder les points suivants :
- Découvrez 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 aider les personnes ayant un handicap.
Objectif et contexte de l'image
Avant même d'écrire une seule ligne de code, réfléchissez à l'objectif de l'image de point, à son emplacement et à son utilisation. Vous poser ces questions peut vous aider à 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 demander :
- 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 ?
- L'image est-elle simplement une "friandise visuelle" sans véritable 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 restant ?" Si la réponse est oui, il s'agit probablement d'une image décorative. Sinon, l'image est informative d'une manière ou d'une autre et nécessaire dans le 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 aux technologies d'assistance. Lorsque vous programmez une image pour qu'elle soit masquée, vous indiquez à 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 une alternative textuelle vide ou nulle, en appliquant ARIA ou en ajoutant l'image comme arrière-plan CSS. Voici quelques exemples de méthodes pour masquer une image décorative aux utilisateurs.
alt vide ou nul
Un attribut de texte alternatif vide ou nul est différent 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 donner à 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'intégralité de l'élément et de 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 prudence, car il peut masquer des éléments que vous ne souhaitez pas masquer.
Images dans le CSS
Lorsque vous ajoutez une image d'arrière-plan avec CSS, un lecteur d'écran ne peut pas détecter le fichier image. Avant d'appliquer cette méthode, assurez-vous de vouloir masquer l'image.
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 son objectif. Les descriptions alternatives d'images, 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 son message ou son intention.
Vous pouvez ajouter des descriptions alternatives aux éléments <img> en incluant l'attribut alt. Cela s'applique à tous les types de fichiers, y compris JPG, PNG ou SVG.
<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> intégrés, vous devez accorder une attention particulière à l'accessibilité. Les SVG sont codés de manière sémantique, de sorte que les technologies d'assistance les ignorent par défaut.
Si le fichier SVG est une image décorative, ce n'est pas un problème, car la technologie d'assistance l'ignorera comme prévu. Toutefois, si votre SVG est une image informative, ajoutez l'ARIA role="img" à l'élément pour que les technologies d'assistance le reconnaissent 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 associée à une action. Par exemple, un logo qui renvoie vers 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 sont des exemples d'images fonctionnelles.
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 de 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.
L'une des façons d'ajouter des descriptions alternatives aux images consiste à utiliser du texte visuellement masqué. 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 d'un CSS personnalisé.
L'extrait de code montre que "Accéder à la page d'accueil" est le titre du wrapper et que 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 véhiculée dans une image.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
les 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 un lien de renvoi vers une explication plus longue sur la page. Cette méthode est un bon choix, non seulement pour les utilisateurs de TA, mais elle aide également les personnes ayant un handicap (cognitif, d'apprentissage et de lecture, par exemple) qui peuvent bénéficier de ces informations supplémentaires sur les images, disponibles directement à l'écran au lieu d'être enfouies dans le code.
Vous pouvez également ajouter l'attribut aria-describedby à l'élément <img>. Vous pouvez associer l'image à un ID contenant une description plus longue de manière programmatique. Cette méthode crée une association forte entre l'image et la description complète. La description détaillée peut être affichée à l'écran ou masquée visuellement. Toutefois, 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 éléments<figure> et <figcaption>. Ces éléments agissent de la même manière que aria-describedby, en regroupant sémantiquement les éléments, ce qui renforce l'association entre l'image et sa description.
L'ajout de role="group" ARIA assure la rétrocompatibilité avec les anciens navigateurs Web qui ne sont pas compatibles avec 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 montre une nuée de coccinelles en train de dévorer les feuilles de votre rosier préféré, mais que votre texte alternatif indique simplement "insectes", le message et l'intention de l'image sont-ils entièrement transmis ? Certainement pas.
Les descriptions alternatives doivent être aussi succinctes que possible et contenir le maximum d'informations visuelles pertinentes. 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 une légende ou décrire plus en détail l'image dans le corps principal.
Voici quelques bonnes pratiques supplémentaires concernant le texte alternatif :
- Évitez d'utiliser des mots comme "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, veillez à être aussi cohérent et précis que possible. Les noms d'images sont utilisés par défaut 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 de vos images ou le texte alternatif.
- Utilisez une ponctuation appropriée dans la mesure du possible. Sans cela, les descriptions d'images ressembleront à une longue phrase sans fin.
- Rédigez un texte alternatif comme un humain, et non comme un robot. L'accumulation de mots clés n'est bénéfique pour personne : elle agace les utilisateurs de lecteurs d'écran et les algorithmes des moteurs de recherche vous pénalisent.