Images

À première vue, les images accessibles peuvent sembler être un thème simple. Vous ajoutez du "texte alternatif" à une image, et vous avez terminé. Mais, le sujet est plus nuancé que ce que pensent certaines personnes. 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 façons d'améliorer vos images afin de soutenir les personnes ayant un handicap.

Objectif et contexte de l'image

Avant même d'écrire une seule ligne de code, vous devez d'abord réfléchir de l'image et comment elle sera utilisée. En vous posant des questions sur l'objectif et le contexte de l'image peuvent vous aider à déterminer la meilleure façon de transmettre des informations à une personne utilisant Technologie d'assistance comme les 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 essaie-t-elle de transmettre ?
• L'image est-elle simple ou complexe ?
• L'image suscite-t-elle des émotions ou incite-t-elle l'utilisateur à agir ?
• Ou peut-être que l'image est juste un "bonbon pour les yeux" sans véritable objectif ?

Un organigramme visuel, tel qu'un arbre de décision des images, peut vous aider à choisir la catégorie à laquelle votre image appartient.

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. Ensuite, posez-vous la question suivante : "Est-ce que je comprends le contenu restant ?" Si la réponse est oui, il s'agit très probablement d'une image décorative. Sinon, l'image est plutôt informatif d'une manière ou d'une autre, et le contexte est nécessaire. Une fois que vous déterminer l'objectif de l'image, vous pouvez déterminer la méthode de codage la plus précise pour cela.

Images décoratives

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

Si vous décidez qu'une image est décorative, elle doit être masquée par programmation des TA. Lorsque vous programmez une image à masquer, cela indique à la TA que image n'est pas nécessaire pour comprendre le contenu, le contexte ou l'action de la page. Il y il existe de nombreuses façons de masquer des images, y compris en utilisant une alternative au texte vide/vide, l'application d'ARIA ; en ajoutant l'image comme arrière-plan CSS. Vous trouverez ci-dessous quelques exemples image décorative des utilisateurs.

Valeur alt vide ou nulle

Un attribut de texte alternatif vide/nul est différent d'un attribut de texte alternatif manquant . Si l'attribut de texte alternatif est manquant, la TA peut indiquer le nom du fichier ou le contenu environnant pour donner plus d'informations à l'utilisateur 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'accessibilité arborescence. En attendant, aria-hidden= "true" supprime l'intégralité de l'élément, et tous ses enfants, 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 qui que vous ne souhaitez pas masquer.

Images dans CSS

Lorsque vous ajoutez une image de fond avec CSS, un lecteur d'écran ne détecte pas fichier image. Avant d'appliquer cette méthode, assurez-vous que l'image doit être masquée.

Images informatives

Une image informative est une image qui traduit un concept, une idée ou une émotion simple. Les images informatives incluent les photos d'objets réels, les icônes essentielles, les dessins simples et les images de texte.

Si votre image est informative, vous devez inclure un texte alternatif programmatique décrivant son objectif. Les descriptions d'images alternatives, souvent abrégées sous forme de « texte alt », fournissent aux utilisateurs de TA un contexte supplémentaire sur une image et les aident à mieux comprendre le message ou l'intention d'une image.

Descriptions alternatives simples utilisant <img> éléments sont obtenus en incluant l'attribut alt, quel que soit le type de fichier pointe vers, 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 à l'accessibilité.

Tout d'abord, comme les SVG sont codés sémantiquement, AT les ignore par défaut. Si vous disposez d'une image décorative, ce n'est pas un problème. Les TA ignoreront comme prévu. En revanche, si vous avez une image informative, un role="img" ARIA doit être ajouté au motif pour que la TA la reconnaisse en tant qu’image.

Deuxièmement, les éléments <svg> n'utilisent pas l'attribut alt. différentes méthodes de codage doivent être afin d'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 associées à une action. Un exemple d’image fonctionnelle est un logo qui relie à la page d'accueil, une loupe utilisée comme bouton de recherche ou une qui vous redirige vers un autre site Web ou une autre application.

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

Dans l'exemple du logo, l'image est à la fois informative et exploitable, car elle est à la fois une image qui transmet des informations et se comporte comme un lien. Dans de tels cas, vous pouvez ajouter d'autres descriptions à chaque élément, mais il ne s'agit pas cette exigence.

L'une des façons d'ajouter des descriptions alternatives aux images consiste à utiliser des caches visuels texte. 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é.

Dans l'extrait de code, vous pouvez voir que "Accéder à la page d'accueil" est le et le texte alternatif de l'image est "Lovely Ladybugs for your Pelouse." Lorsque vous écoutez le code du logo avec un lecteur d'écran, vous entendez à la fois les le visuel et l'action véhiculée dans une seule 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

Souvent, les images complexes demande plus d'explications qu'une présentation décorative, informative ou et fonctionnelle. Il faut une alternative courte et longue pour transmettre le message complet. Les images complexes incluent les infographies, cartes, graphiques/diagrammes et illustrations complexes. Comme pour les autres d'images, il existe différentes méthodes pour ajouter des 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 est de créer un lien vers une ressource ou fournir un lien vers une explication plus longue plus loin sur la page. Cette méthode est un bon choix, non seulement pour les utilisateurs de TA, mais aussi pour aider les personnes à handicaps cognitifs, tels que les troubles cognitifs, l'apprentissage et la lecture handicapées, qui pourraient bénéficier de cette image supplémentaire des informations facilement accessibles à l'écran au lieu d'être enfouies dans le code.

Vous pouvez également utiliser l'attribut aria-describedby à la commande Élément <img>. Vous pouvez lier l'image par programmation à un ID contenant un 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 sur la à l'écran ou de les masquer, mais pensez à les garder visibles pour les plus de personnes.

Pour regrouper des descriptions courtes avec des descriptions plus longues, vous pouvez également utiliser les éléments HTML5 <figure> et <figcaption>. Ces éléments se comportent de la même manière que aria-describedby, en ce sens qu'il les regroupe sémantiquement, créant 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, l'ajout d'un texte de substitution ne suffit pas. Le texte doit également être significative. Par exemple, si votre image montre un essaim de coccinelles qui mâchent feuilles de votre rosier juif, mais votre texte alternatif indique "insectes", voudrait qui transmettent l'intégralité du message et l'intention de l'image ? Certainement pas.

Les descriptions alternatives doivent capturer autant d'informations visuelles pertinentes possible et être concis. Bien qu'il n'y ait pas de limite au nombre de caractères lecteur d'écran peut lire, il est généralement recommandé de limiter le texte alternatif à 150 caractères maximum pour éviter la fatigue des lecteurs Si vous avez besoin d'ajouter le contexte de l'image, vous pouvez utiliser l'un des motifs complexes, ajouter texte de la légende, ou décrivez plus en détail l'image dans le texte principal.

Quelques autres textes de remplacement pratiques incluent:

• Évitez d'utiliser des mots comme "image de" ou "photo de" dans la description, lecteur d'écran identifiera ces types de fichiers pour vous.
• Lorsque vous attribuez un nom à vos images, soyez aussi cohérent et précis que possible. Illustrée sont utilisés en remplacement lorsque le texte alternatif est manquant ou ignoré.
• Évitez d'utiliser des caractères qui ne sont pas alphanumériques (par exemple, #, 9 ou &) et des tirets. entre des mots plutôt que des traits de soulignement dans les noms de vos images ou votre texte alternatif.
• Dans la mesure du possible, utilisez les signes de ponctuation appropriés. Sans cela, les descriptions d'images ressemble à une longue phrase sans fin.
• Écrivez des textes alternatifs comme un humain et non un robot. L'accumulation de mots clés ne servira à personne : les utilisateurs de lecteurs d'écran seront agacés et les algorithmes des moteurs de recherche vous pénaliseront.

Testez vos connaissances

Tester vos connaissances sur ARIA et HTML