Renseigner le texte alternatif des images
Le texte alternatif est une courte description associée à une image. Il n'apparaît pas à l'écran, mais il est lu à voix haute par les lecteurs d'écran utilisés par les personnes malvoyantes, et affiché à la place de l'image si celle-ci ne se charge pas. Il est également exploité par les moteurs de recherche.
C'est une exigence de la directive européenne sur l'accessibilité numérique (European Accessibility Act) : chaque image porteuse d'information doit être décrite.
Sur votre boutique en ligne, une partie de ces textes est générée automatiquement. Les images que vous placez vous-même dans le constructeur de site sont les seules dont le texte alternatif vous revient.
1. Les images dont vous n'avez pas à vous occuper
Le texte alternatif est renseigné automatiquement pour les images gérées par le catalogue :
- Les images de vos produits, qui reprennent le nom du produit.
- Les images de vos catégories.
- Les images du thème de votre boutique.
Vous n'avez aucune action à effectuer pour ces images. En soignant le nom de vos produits, vous améliorez donc directement la qualité des textes alternatifs de votre boutique.
2. Les images du constructeur de site
Les images que vous ajoutez vous-même dans une page, via le constructeur de site, ne peuvent pas être décrites automatiquement : la plateforme ne sait pas ce qu'elles représentent. C'est à vous de renseigner leur texte alternatif.
1. Rendez-vous au menu Administration > Front-end, puis cliquez sur l'onglet "Pages".
2. Sur la page concernée, cliquez sur l'icône du constructeur de site.
3. Sélectionnez le composant contenant l'image, puis cliquez sur l'icône en forme de roue crantée pour ouvrir ses paramètres.
4. Renseignez le champ "Texte alternatif".
5. Enregistrez votre page.
Répétez l'opération pour chaque image de vos pages.
Pour l'utilisation du constructeur de site, consultez le tutoriel Construire et modifier les pages de votre front-end à l'aide du builder. Pour la création et la configuration de vos pages, consultez le tutoriel Créer et configurer les pages de votre front-end.
3. Rédiger un bon texte alternatif
Quelques principes pour que la description soit réellement utile :
1. Décrivez ce que montre l'image, pas ce qu'elle est. Écrivez « Vélo électrique urbain noir vu de profil » plutôt que « photo » ou « image 1 ».
2. Restez court. Une phrase suffit. Un lecteur d'écran lit le texte intégralement : une description trop longue devient pénible à écouter.
3. Ne commencez pas par « image de » ou « photo de ». Les lecteurs d'écran annoncent déjà qu'il s'agit d'une image.
4. Reprenez le texte si l'image en contient. Un visuel comportant le message « -20 % sur toute la gamme » doit le faire figurer dans sa description, sans quoi l'information est perdue.
5. Laissez le champ vide pour une image purement décorative, un motif de fond ou un séparateur graphique par exemple. Une description inutile alourdit la lecture sans rien apporter.
Bon à savoir : un texte alternatif bien rédigé sert aussi votre référencement. Les moteurs de recherche s'en servent pour comprendre le contenu de vos images et les faire remonter dans les résultats de recherche d'images.