Texte alternatif. Nous savons que c'est quelque chose qui peut être ajouté aux images sur le Web, mais qu'est-ce que c'est vraiment ? C'est pour qui? Pourquoi devrions-nous nous en soucier ? Et, peut-être le plus important, comment l'écrivons-nous ?
Explorons ces questions et plus encore !
Qu'est-ce que le texte alternatif ?
Le texte alternatif, ou "texte alternatif" comme le nom le suggère, est une description textuelle écrite d'une image sur le Web. Il est utile de décrire l'image pour que le lecteur comprenne de quoi il s'agit.
En d'autres termes, le texte alternatif est le contenu. Et comme tout autre contenu de votre site, il doit être bien écrit et construit, prêt à être consommé.
Pourquoi le texte alternatif est-il important ?
Il existe quelques situations où la rédaction de texte alternatif et l'inclusion de descriptions bien formées pour vos images sont bénéfiques pour un site Web réussi. Explorons les différents avantages de l'ajout de texte alternatif.
référencement
Lorsque les moteurs de recherche, tels que Google, explorent le contenu de votre site, ils indexent le texte alternatif trouvé intégré pour toutes les images trouvées sur la page actuelle. Ceci est utilisé pour obtenir une image claire (sans jeu de mots) du contenu diffusé afin de fournir des résultats de recherche précis.
Une idée fausse courante est que le texte alternatif est uniquement destiné à des fins de référencement, comme un moyen de tirer parti du conteneur de "texte caché" et de l'utiliser pour essayer d'augmenter le classement du site parmi les moteurs de recherche. Ce qui est décrit ici est le "bourrage de mots clés", qui consiste à utiliser l'attribut alt pour injecter autant de "mots clés" que possible afin d'être mieux classé dans les résultats des moteurs de recherche. Cette action est très mal vue et peut en fait faire baisser votre classement. Cela pourrait également être considéré comme un abus car le référencement n'est pas la seule raison d'avoir un texte alternatif disponible, comme nous le découvrirons ensuite.
Pour les utilisateurs voyants
Si une image ne se charge pas, potentiellement en raison d'une mauvaise connexion ou d'un appareil sous-alimenté, le texte alternatif de l'image s'affiche à la place. Cela a l'avantage de faire savoir à quelqu'un qu'une image était censée être chargée ici, mais comme alternative, il peut toujours consommer le contenu du texte.
Pour les utilisateurs de technologies d'assistance
Le texte alternatif offre aux personnes malvoyantes la possibilité de participer à la consommation de contenu non textuel. Lorsqu'une technologie d'assistance, telle qu'un lecteur d'écran, rencontre une image sur le Web, le texte alternatif est lu et annoncé à haute voix. Ce faisant, quelqu'un qui s'appuie sur cette technologie peut toujours avoir une compréhension claire de ce que représente l'image.
Les personnes qui utilisent et comptent sur la technologie d'assistance ont le plus à gagner lorsqu'elles interagissent avec du contenu non textuel sur le Web, il est donc impératif de définir l'écriture de contenu non textuel comme une priorité pour vos auteurs de contenu.
Comment écrire un texte alternatif
Écrire un texte alternatif descriptif de haute qualité n'est peut-être pas aussi facile qu'il n'y paraît. Un rapide one-liner de "Chat sur un canapé", "chaussures blanches" ou "groupe de personnes", ne fait pas tout à fait l'affaire de peindre une image mentale.
D'un autre côté, il est possible de submerger quelqu'un avec trop de texte descriptif. Obtenir cette fine ligne de précision descriptive est quelque chose d'un maître de compétence.
Un exercice de description d'images
La prochaine fois que vous aurez besoin d'écrire du texte alternatif pour décrire une image, essayez cet exercice :
- Choisissez une photo qui nécessite un texte alternatif.
- Asseyez-vous à côté d'un collègue, d'un ami ou d'un membre de la famille.
-
Sans leur montrer la photo, décrivez à haute voix les détails de l'image.
- S'il s'agit d'un groupe de personnes, décrivez où ils se trouvent ou ce qu'ils font.
- S'il s'agit d'un coucher de soleil pittoresque, décrivez comment le soleil pourrait rayonner sur les arbres ou les bâtiments environnants.
- S'il s'agit d'une image d'un produit vendu, décrivez ses caractéristiques physiques avec suffisamment de détails pour que quelqu'un envisage de faire l'achat.
-
Après avoir décrit l'image, montrez-leur la photo et demandez-leur de comparer ce qu'ils ont imaginé dans leur esprit avec la réalité.
Ce faisant, vous aurez commencé le processus d'écriture d'une description pour l'image. Vous devrez peut-être ajuster et coupler la description de manière appropriée pour le contenu écrit, mais vous êtes sur la bonne voie pour ajouter un texte alternatif utile et utile pour votre image.
Un exemple
À titre de test, écrivons un texte alternatif pour cette image :
Pour cette image, une description précise pourrait ressembler à :
"Une paire de chaussures basses est placée sur une table marron foncé devant un mur de briques blanches. Les chaussures sont principalement bleu foncé avec une semelle intercalaire blanche, des lacets marron, une languette arrière noire et une doublure blanche."
Cette description est assez précise, mais un peu trop verbeuse. Puisque nous décrivons un produit, nous pouvons nous concentrer directement sur les caractéristiques physiques du produit.
Réduisons la description à l'essentiel, comme :
"Chaussures basses bleu foncé avec une semelle intercalaire blanche, de la dentelle marron, une languette noire à l'arrière et une doublure blanche."
Ce texte alternatif fait l'affaire; il décrit l'image de manière claire et précise, sans submerger quelqu'un lorsqu'il absorbe le contenu. La recommandation générale est de garder le texte alternatif à environ 100 caractères afin d'atteindre cette fine ligne de contenu "juste assez".
Remarque : Il convient également de souligner que, puisque les éléments d'image ont leur propre signification sémantique annoncée par la technologie d'assistance, il n'est pas nécessaire d'inclure un texte tel que "image de" ou "graphique de" pour décrire une image - cela sera annoncé automatiquement lorsque le lecteur d'écran interagit avec l'image.
La ponctuation a-t-elle de l'importance ?
Vous avez peut-être remarqué l'utilisation de la ponctuation dans la description du texte alternatif de l'image ci-dessus. Cela fait-il une différence dans la façon dont la description de l'image est transmise à quelqu'un utilisant un lecteur d'écran ?
La réponse simple est oui. En utilisant une ponctuation appropriée telle que des virgules ou des points, cela aide les lecteurs d'écran à décrire l'image dans une approche plus "humaine".
Les virgules ajouteront une courte pause entre les annonces de contenu. Si vous placez un point à la fin d'une phrase, le lecteur d'écran "respirera".
Comme pour tout contenu bien structuré, les personnes qui consomment du texte alternatif à l'aide d'un lecteur d'écran bénéficient également grandement d'une structure de phrase appropriée.
Images sans l'attribut alt
Lors de l'écriture de code HTML, il est important de toujours inclure l'attribut alt sur un élément d'image. Sans cet attribut, vous risquez de rencontrer certains problèmes :
- Sans attribut
alt, votre balisage HTML est considéré comme non valide et peut entraîner une expérience utilisateur incohérente - Lorsqu'un lecteur d'écran rencontre un élément
imgsans l'attributalt, la valeur de l'attributsrcest annoncée. Cela n'est souvent pas utile et peut être considéré comme une mauvaise expérience utilisateur.
Dans cet esprit, que vous travailliez avec Wordpress, React ou du HTML simple, n'oubliez pas de toujours inclure l'attribut alt lorsque vous incluez une image dans le code.
L'attribut alt dans le code : HTML
L'ajout de texte alternatif à une image lors de l'écriture de code HTML consiste à ajouter l'attribut alt à un élément img.
Par exemple, le code HTML de l'image ci-dessus serait :
<img src="cat.jpg" alt="A long-haired, grey and white cat with green eyes rests on a dark grey, fabric couch." />
Lorsque cette image interagit avec un lecteur d'écran, le texte alternatif sera annoncé, aidant à fournir le modèle mental nécessaire pour acquérir une compréhension du contenu de l'image.
L'attribut alt dans le code : Markdown
Markdown est une méthode pour écrire et fournir un contenu structuré pour le Web de manière simple et rapide.
Comment créer du contenu d'image à l'aide de Markdown consiste à commencer une nouvelle ligne de texte avec un point d'exclamation, suivi d'une paire de crochets qui inclut le texte alternatif, puis d'une paire de parenthèses qui inclut le chemin URL vers l'image en cours de diffusion .
Par exemple:
Lorsque l'interpréteur Markdown s'exécutera pour convertir ceci en HTML, il ressemblera et se comportera de la même manière que l'exemple HTML précédent.
Quand inclure le texte alternatif
Vous pourriez être tenté de toujours inclure une sorte de texte dans l'attribut alt afin de répondre aux cas décrits ci-dessus. Cependant, le fait demeure que toutes les images ne doivent pas avoir une valeur définie pour leur attribut alt .
Comment savons-nous quand inclure du texte alternatif pour nos images ? Voici trois situations courantes à considérer si le texte alt doit être ajouté ou si l'attribut alt doit être défini comme vide.
- Si l'image elle-même contient du texte, tel qu'un logo ou une citation inspirante intégrée à l'image, la valeur de l'attribut
altdoit correspondre exactement au texte visible. - Si l'image n'ajoute aucun contenu utile à l'article ou est adjacente au contenu textuel associé, la valeur de l'attribut
altdoit être laissée vide. Il en résulte que les lecteurs d'écran contournent complètement l'image car elle est considérée comme une image "décorative". - Si l'image est considérée comme ajoutant du contenu ou de la valeur à l'article, ajoutez un texte alternatif descriptif.
- Si l'image se trouve dans un contrôle, décrivez l'action du contrôle, pas l'image.
Il y a plus d'exemples et de situations à considérer. Pour une liste plus complète, consultez le didacticiel " An alt Decision Tree ".
Texte alternatif dans les images cliquables
Les images cliquables sont une méthode pour appliquer des liens, ou des zones cliquables, à une image au format HTML. Ceux-ci sont généralement utilisés avec du contenu infographique afin de fournir plus d'informations.
En arrière-plan, les composants d'image cliquable sont construits avec trois éléments HTML :
-
map- L'élément wrapper pour chaque section cliquable -
area– La zone cliquable individuelle -
img- L'image visuelle pour accompagner la carte d'image
Nous savons déjà qu'une image en HTML nécessite l'attribut alt et, conditionnellement, nécessite une alternative textuelle pour décrire l'image pour les utilisateurs de lecteurs d'écran. Le même concept est également vrai avec les éléments de area de carte d'image, qui nécessitent l'attribut alt afin de décrire la zone cliquable aux lecteurs d'écran.
Des médias sociaux
Si vous gérez un compte de réseau social pour votre entreprise, il est recommandé d'inclure un texte alternatif pour les images incluses. Examinons quelques plates-formes pour voir ce dont elles disposent pour nous aider à être plus inclusifs et attentifs à ceux qui ne sont peut-être pas en mesure de voir les images attachées aux publications.
Twitter dispose d'une méthode intégrée pour ajouter du texte alternatif lorsque vous joignez une image à un Tweet. Il s'agit d'une fonctionnalité pratique à connaître et à utiliser lorsque vous joignez une image, car sans cela, beaucoup de gens pourraient manquer votre excellent contenu !
Le processus d'ajout de texte alternatif est documenté dans l'article d'aide de Twitter, " Comment rendre les images accessibles aux personnes ".
Facebook ajoute automatiquement du texte alternatif à une image après son téléchargement. Bien que le texte généré puisse être pour la plupart précis, il n'est souvent pas assez descriptif pour peindre cette image mentale.
Le processus pour remplacer le contenu généré automatiquement est documenté dans l'article d'aide de Facebook, « Comment puis-je modifier le texte alternatif d'une photo ? »
Moyen
Medium propose sa propre méthode d'ajout de texte alternatif aux images. Voici comment y parvenir :
- Mettez votre article en mode édition
- Passez la souris sur l'image pour la mettre en surbrillance, puis cliquez sur l'image
- Cliquez sur le bouton "Texte alternatif"
- Ajoutez votre texte de contenu alternatif
Remarque : lorsqu'aucun texte alternatif n'est ajouté à une image, Medium n'inclut pas l'attribut alt , ce qui fait que les lecteurs d'écran entendent le contenu de l'attribut src ! Assurez-vous d'inclure des images significatives et non décoratives dans vos publications.
Instagram a également une méthode intégrée pour ajouter du texte alternatif à ses images. Les étapes pour ajouter du texte alternatif à vos publications sont décrites dans l'article " Comment modifier le texte alternatif d'une photo sur Instagram ? "
Sans spécifier de texte alternatif, Instagram tente d'inclure une description générée automatiquement. Comme Facebook, les descriptions automatiques sont assez précises, mais manquent de profondeur pour décrire vraiment l'image.
Si la plate-forme de votre choix prend officiellement en charge l'ajout de texte alternatif aux images, n'oubliez pas d'utiliser ces fonctionnalités chaque fois que vous téléchargez une photo afin que tout le monde puisse participer et en profiter !
N'oubliez pas non plus de toujours inclure l'attribut alt lors de l'intégration d'une image dans votre code ou sur les réseaux sociaux. Le cas échéant, définissez sa valeur sur une alternative textuelle descriptive et concise. De cette façon, vous créerez un contenu inclusif et tout le monde pourra participer et profiter des images de vos publications !
Critères de réussite WCAG
Cela revient à 1.1.1 Contenu non textuel qui stipule :
"Tout le contenu non textuel qui est présenté à l'utilisateur a une alternative textuelle qui sert un objectif équivalent."