Comment ajouter des attributs alt sur les images Webflow ?
Apprenez à ajouter des attributs alt sur les images Webflow pour améliorer le SEO et l'accessibilité.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter et gérer les attributs alt sur les images Webflow pour le SEO et l'accessibilité.
| Type d'image | Attribut alt recommandé | Exemple |
|---|---|---|
| Image informative | Description précise du contenu | 'Tableau de bord analytics avec graphique de trafic' |
| Image décorative | Vide (alt='') | Image de fond purement visuelle |
| Image de produit | Nom + caractéristiques clés | 'Chaise ergonomique noire, réglable en hauteur' |
| Logo | Nom de la marque | 'Logo Gemeos agence Webflow' |
1. Ajoutez l'alt text dans le Designer
Sélectionnez votre image dans le Designer. Dans le panneau Settings (icône engrenage), remplissez le champ Alt Text. Rédigez une description courte et précise du contenu visible de l'image.
2. Alt text dynamique dans le CMS
Pour les images dans vos collections CMS, connectez le champ Alt Text à un champ texte du CMS. Dans le Designer, cliquez sur l'icône de connexion du champ Alt Text et sélectionnez le champ CMS correspondant. Chaque image affichera automatiquement son propre alt text.
3. Images décoratives : alt vide
Pour les images purement décoratives (fonds, séparateurs, illustrations non informatives), laissez le champ alt vide ou ajoutez alt="". Les lecteurs d'écran les ignoreront. Ne pas mettre d'alt text du tout est différent de mettre un alt vide.
Conclusion
Les attributs alt améliorent simultanément le SEO et l'accessibilité. Auditez vos images manquantes avec WAVE : optimiser l'accessibilité visuelle.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
