Images

Les images accessibles peuvent sembler être un sujet simple à première vue : vous ajoutez du "texte alternatif" à une image, et vous avez terminé. Mais, le sujet est plus nuancé que certaines personnes ne le pensent. Dans cette section, nous allons aborder les points suivants:

• Mettre à jour le code pour rendre les images accessibles
• Quelles informations doivent être partagées avec les utilisateurs et où les partager.
• Autres moyens d'améliorer vos images pour aider les personnes ayant un handicap.

Objectif de l'image et contexte

Avant qu'une seule ligne de code ne soit écrite, vous devez d'abord réfléchir au point de l'image et à la façon dont elle sera utilisée. Se poser des questions sur l'objectif et le contexte de l'image peut vous aider à déterminer la meilleure façon de transmettre ces informations à une personne à l'aide de technologies d'assistance (TA) telles que des lecteurs 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 cherche-t-elle à transmettre ?
• L'image est-elle simple ou complexe ?
• L'image suscite-t-elle une émotion ou incite-t-elle l'utilisateur à agir ?
• Ou bien l'image est-elle un simple objet visuel qui n'a pas de véritable intérêt ?

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

Essayez de masquer les images sur votre site ou dans 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. Si ce n'est pas le cas, l'image est informative d'une manière ou d'une autre et nécessaire en fonction du contexte. Une fois que vous avez déterminé l'objectif de l'image, vous pouvez déterminer la méthode la plus précise pour 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 de la substance.

Si vous décidez qu'une image est décorative, elle doit être masquée de manière programmatique pour les TA. Lorsque vous programmez une image pour qu'elle soit masquée, cela indique à l'AT 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 au texte vide/null, en appliquant des flux ARIA ou en ajoutant l'image en tant qu'arrière-plan CSS. Vous trouverez ci-dessous quelques exemples de méthodes pour masquer une image décorative.

alt vide ou nul

Un attribut de texte alternatif vide/null diffère d'un attribut de texte alternatif manquant. Si l'attribut texte alternatif est manquant, la TA peut lire le nom du 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é. En attendant, aria-hidden= "true" supprime l'intégralité de l'élément (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 prudence, car il peut masquer des éléments que vous ne souhaitez pas masquer.

Images en CSS

Lorsque vous ajoutez une image de fond avec CSS, un lecteur d'écran ne détecte pas le fichier image. Veillez à ce que l'image soit masquée avant d'appliquer cette méthode.

Images informatives

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

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

Les descriptions alternatives simples utilisant des éléments <img> sont obtenues en incluant l'attribut alt, quel que soit le type de fichier vers lequel il pointe (par exemple, .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> intégrés, vous devez faire attention à leur accessibilité.

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

Deuxièmement, les éléments <svg> n'utilisent pas l'attribut alt. Par conséquent, vous devez utiliser différentes méthodes de codage pour ajouter d'autres descriptions à vos images informatives.

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

Images fonctionnelles

Une image fonctionnelle est connectée à une action. Un logo qui renvoie vers la page d'accueil, une loupe utilisée comme bouton de recherche ou une icône de réseaux sociaux qui vous redirige vers un autre site Web ou une autre application sont des exemples d'image fonctionnelle.

Comme les images informatives, les images fonctionnelles doivent inclure une autre description 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 ses 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 de tels cas, vous pouvez ajouter d'autres descriptions à chaque élément, mais ce n'est pas une obligation.

Pour ajouter des descriptions alternatives aux images, vous pouvez 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 visuellement masqué à l'aide de code CSS personnalisé.

Dans l'extrait de code, vous pouvez voir que "Navigate to the home" (Accéder à la page d'accueil) est le titre du wrapper, et que le texte alternatif de l'image est "Lovely Ladybugs for your Lawn". Lorsque vous écoutez le code du logo avec un lecteur d'écran, vous entendez à la fois l'élément visuel et l'action retransmis dans une même image.

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

Images complexes

Une image complexe nécessite souvent plus d'explications qu'une image décorative, informative ou fonctionnelle. Il nécessite à la fois une description courte et une description longue pour transmettre l'intégralité du message. Les images complexes comprennent les infographies, les cartes, les graphiques/tableaux et les illustrations complexes. Comme pour les autres types d'images, vous pouvez utiliser différentes méthodes pour ajouter d'autres descriptions à 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>

Une façon d'ajouter une explication supplémentaire à une image consiste à créer un lien vers une ressource ou à fournir un lien permettant d'accéder à une explication plus longue plus loin sur la page. Cette méthode est un bon choix, non seulement pour les utilisateurs de TA, mais elle aide également les personnes ayant des handicaps, tels que des troubles cognitifs, d'apprentissage et de lecture, qui pourraient bénéficier d'un accès facile à ces informations d'images supplémentaires à l'écran au lieu d'être englouties dans le code.

Une autre méthode consiste à ajouter l'attribut aria-describedby à l'élément <img>. Vous pouvez associer l'image de manière programmatique à 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. Toutefois, pensez à la garder visible pour répondre aux besoins d'un plus grand nombre d'utilisateurs.

Pour regrouper des descriptions courtes et plus longues, vous pouvez également utiliser les éléments HTML5 <figure> et <figcaption>. Ces éléments agissent de la même manière que aria-describedby, dans la mesure où ils regroupent sémantiquement les éléments, formant ainsi une association plus forte entre l'image et sa description. L'ajout d'ARIA role="group" garantit la rétrocompatibilité avec les anciens navigateurs Web qui ne sont pas compatibles avec la sémantique native de l'élément <figure>.

Bonnes pratiques concernant les textes alternatifs

Bien entendu, inclure un texte de substitution ne suffit pas. Le texte doit également être pertinent. Par exemple, si votre image représente un essaim de coccinelles mâchant les feuilles de votre rosier, mais que votre texte alternatif indique "insectes", cette image transmet-elle 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 recommandé 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 du texte de légende ou décrire plus en détail l'image dans le texte principal.

Voici quelques bonnes pratiques supplémentaires concernant les textes alternatifs:

• É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 des solutions de remplacement lorsque le texte alternatif est manquant ou ignoré.
• Évitez d'utiliser des caractères qui ne sont pas des caractères alphanumériques (par exemple, #, 9 et &) et utilisez des tirets entre les mots plutôt que des traits de soulignement dans les noms de vos images ou du texte alternatif.
• Dans la mesure du possible, utilisez une ponctuation appropriée. Sans cela, les descriptions d'images ressembleront à une seule phrase longue, sans fin et sans fin.
• Écrivez un texte alternatif qui ressemble à un humain et non à un robot. L'accumulation de mots clés ne profite à personne : les utilisateurs de lecteurs d'écran seront déçus, et les algorithmes des moteurs de recherche vous pénaliseront.

Testez vos connaissances

Tester vos connaissances sur ARIA et le langage HTML