Exemples de texte alt : quoi écrire pour chaque type d'image

Exemples de texte alt

Exemples de texte alt : bons et mauvais, par type d'image | We.Inc

Ce que signifie le texte alt, de bons et de mauvais exemples de texte alt pour les logos, produits, icônes, graphiques et images décoratives, les étapes de décision du W3C et un court quiz d'entraînement.

Le texte alt est le court substitut écrit d'une image, défini dans l'attribut alt d'une balise img. Les lecteurs d'écran le lisent à voix haute et les navigateurs l'affichent quand l'image ne se charge pas. Un bon texte alt dit ce que l'image signifie à sa place sur la page ; les images décoratives reçoivent un alt vide.

Exemples rapides par type d'image

Image
Alt faible
Meilleur alt

Logo renvoyant à l'accueil
Accueil Smith Roofing

Photo de produit
Sac cabas en cuir marron avec boucle en laiton

Bouton avec icône de recherche
loupe
Rechercher

Volute de séparation
volute décorative
(vide : alt="")

Photo de l'équipe
Nos quatre couvreurs devant la camionnette de l'atelier

Graphique des ventes
Ventes par mois, détails dans le tableau ci-dessous

Les bons mots dépendent de la raison d'être de l'image, pas de son apparence. Une loupe dans un bouton signifie Rechercher ; la même forme utilisée comme décoration ne signifie rien du tout. Essayez les questions d'entraînement, puis reprenez ces modèles pour votre propre boutique ou site.

Lisez la situation de chaque carte d'exercice : ce que montre l'image et où elle se trouve sur la page.
Choisissez parmi les trois options le texte alt que vous écririez.
La carte vous indique si ce choix fonctionne et quelle étape de l'arbre de décision du W3C s'applique.
Servez-vous du tableau d'exemples ci-dessous comme référence quand vous ajoutez des images à vos propres pages.

Évitez les formules comme image de ou photo de. Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image.
Pour les photos de produits, citez les détails qu'un acheteur demanderait : couleur, matière, ce qui distingue cette variante.
Si la même information figure en texte juste à côté de l'image, un alt vide évite de la dire deux fois.
N'accumulez jamais de mots-clés. Google prévient que remplir les attributs alt de mots-clés peut faire passer votre site pour du spam.

Questions fréquentes

Que signifie alt dans un texte ?

Alt est l'abréviation d'alternative. Le texte alt est le texte alternatif d'une image : les mots qu'un lecteur d'écran prononce, et ce que le navigateur affiche à la place d'une image qui ne se charge pas. Il se trouve dans l'attribut alt de l'élément img.

Chaque image doit-elle avoir un texte alt ?

Chaque img doit avoir un attribut alt, mais toutes n'ont pas besoin de mots. MDN explique qu'un alt vide indique qu'une image n'est pas un élément essentiel du contenu. Omettre complètement l'alt est pire : certains lecteurs d'écran lisent alors le nom du fichier.

Quelle longueur doit faire un texte alt ?

Assez court pour être dit d'une seule traite pour la plupart des images. L'arbre du W3C demande une brève description pour les photos simples. Les graphiques et schémas font exception : donnez un court libellé dans l'alt et mettez l'information complète en texte sur la page.

Le texte alt aide-t-il le SEO ?

Oui. Le guide des images de Google indique qu'il utilise le texte alt, avec la vision par ordinateur et le contenu de la page, pour comprendre les images. Son propre exemple préfère chiot dalmatien qui rapporte la balle à un simple chiot, et met en garde contre les listes de mots-clés.

Quel texte alt mettre sur un logo ?

Si le logo renvoie à votre page d'accueil, l'alt doit décrire la destination du lien, par exemple le nom de votre entreprise suivi de accueil. S'il est seulement affiché et que votre nom figure déjà en texte à côté, un alt vide convient.

L'arbre de décision du W3C en termes simples

D'abord, l'image contient-elle du texte ? Si ce texte apparaît aussi à proximité sous forme de vrai texte, utilisez un alt vide ; sinon, mettez le texte dans l'alt. Ensuite, se trouve-t-elle dans un lien ou un bouton ? Décrivez alors la destination du lien ou l'action du bouton.
Apporte-t-elle du sens ? Donnez une brève description aux photos simples, et pour les graphiques, placez les données ailleurs sur la page. N'est-elle que décorative ? Utilisez un alt vide.

Le texte alt pour les boutiques en ligne

Les acheteurs qui utilisent un lecteur d'écran comptent sur le texte alt des images de produits comme d'autres comptent sur le zoom. Quand un produit a plusieurs photos, rendez chaque alt différent : vue de face, détail de la poche arrière, porté par un mannequin de 170 cm.

D'autres exemples pour les sites de boutiques et d'entreprises

Exemples de texte alt pour des images professionnelles courantes

Emplacement de l'image
Exemple de texte alt
Pourquoi

Photo principale de l'intérieur d'un café
Comptoir de café ensoleillé avec des viennoiseries fraîches en vitrine
Pose le décor en quelques mots

Portrait sur une page À propos
Dr Amira Khan, dentiste principale
Le nom et le rôle, pas la couleur des cheveux

Icône sociale renvoyant à Instagram
Harbour Bakery sur Instagram
Décrit la cible du lien

Capture d'une carte avec votre adresse à côté
(vide : alt="")
L'adresse est déjà en texte à proximité

Photo avant/après d'un toit réparé
Toit avant réparation, avec des tuiles manquantes au faîtage
Dit ce qui change entre les photos

Badge de certification
Certifié par la chambre régionale des métiers
Dit ce que le badge certifie

Exemples de code

Trois cas courants en HTML

Un logo avec lien, une photo de produit et une image décorative. Notez que l'image décorative a toujours l'attribut alt, simplement vide.

Un graphique avec ses données en texte

L'alt nomme le graphique et renvoie aux détails, qui se trouvent dans une légende que chaque visiteur peut lire.

Entraînement : choisissez le meilleur texte alt

{n} sur {v} réponses correctes.

Correct.

Pas tout à fait. La meilleure réponse est : {v}.

Recommencer

Options de texte alt

Votre logo se trouve dans l'en-tête et renvoie à la page d'accueil. Le nom de votre entreprise n'est écrit nulle part ailleurs dans l'en-tête.

Accueil Harbour Bakery
Notre magnifique logo en bleu

Une image avec lien a besoin d'un texte alt qui indique où mène le lien.

Une fine ligne ondulée sépare deux sections. Elle n'apporte aucune information.

ligne ondulée
image de séparation
Un alt vide (alt="")

Les images purement décoratives prennent un alt vide pour que les lecteurs d'écran les ignorent.

La photo principale d'une page produit pour une tasse disponible en trois couleurs. Celle-ci est la vert sauge.

Tasse en grès vert sauge avec une anse arrondie
tasse tasse tasse à café meilleure tasse cadeau
photo de produit

Une brève description avec les détails qui distinguent cette variante. Les listes de mots-clés sont du spam.

Un bouton avec seulement une icône de panier ouvre le panier d'achat.

Icône de chariot
Voir le panier

Pour une image dans un bouton, décrivez l'action, pas le dessin.

Une bannière avec les mots Livraison gratuite ce week-end. Ces mots ne figurent pas en texte sur la page.

Exemples de texte alt : quoi écrire pour chaque type d'image