Une photo de produit est annoncée trois fois par le lecteur d’écran : le lien, le titre de la carte et un attribut alt qui répète le nom commercial. Ailleurs, une icône « Télécharger le PDF » n’a aucun nom accessible. Le problème ajoute du bruit dans le premier cas et empêche l’action dans le second.
Le vrai enjeu n’est donc pas de remplir chaque attribut avec une phrase. Il consiste à rendre disponible l’information portée par l’image, au bon endroit et sans répétition. Selon le rôle du visuel, la bonne réponse peut être une alternative concise, une valeur vide, un nom d’action ou une description longue visible.
En réalité, l’automatisation sait détecter un attribut absent, mais elle comprend mal l’intention locale. Le même portrait peut identifier une personne dans un annuaire, illustrer une ambiance sur une landing ou devenir le contenu principal d’une galerie. Copier une légende ou un nom de fichier ne résout aucun de ces cas par défaut.
L’accompagnement SEO technique de Dawap relie accessibilité, composants, rendu et qualité des données. La méthode qui suit aide à décider, instrumenter et reprendre un parc d’images sans promettre un gain de classement ni transformer le alt en champ de mots-clés.
1. Commencer par le rôle de l’image, pas par un quota de mots
Une alternative textuelle remplace une image lorsque celle-ci ne peut pas être perçue. Sa qualité se juge donc par la tâche qu’elle permet d’accomplir, pas par sa longueur. Une description de douze mots peut être trop longue pour une icône fonctionnelle et trop courte pour un graphique qui compare dix séries.
La première question porte sur la perte d’information : si l’image disparaît, que manque-t-il pour comprendre ou agir ? Si rien ne manque parce que le contenu voisin transmet déjà tout, l’attribut vide alt="" peut être la réponse. S’il manque une donnée, une identité ou une destination, l’alternative doit restituer précisément cet élément.
Cette approche évite deux coûts cachés. Le premier est la surcharge cognitive pour les utilisateurs de technologies d’assistance. Le second est la dette éditoriale : des milliers de descriptions génériques deviennent impossibles à maintenir quand le catalogue, les visuels ou la langue changent.
Le contexte détermine le remplacement pertinent
Sur une fiche produit, l’image principale peut transmettre couleur, coupe ou configuration qui ne figurent pas encore dans le titre. Sur une carte de listing, le même visuel peut être redondant si le nom, la variante et le prix sont déjà annoncés dans le lien. Les deux usages ne doivent pas recevoir automatiquement la même valeur.
La référence W3C WAI sur la décision de texte alternatif part justement de la fonction et du contenu. Elle fournit un cadre, mais ne remplace pas la lecture du parcours, de la langue et de l’information visible autour du média.
2. Pour qui et dans quels cas la stratégie alt devient prioritaire
Le chantier devient prioritaire pour un e-commerce dont le PIM alimente plusieurs canaux, une plateforme éditoriale avec de nombreux contributeurs, une application métier riche en icônes, ou un site public soumis à une exigence d’accessibilité. Dans ces contextes, une correction manuelle sans modèle de données rechute à la prochaine publication.
Il devient également urgent lorsque les audits signalent des attributs manquants, mais que l’équipe ne sait pas distinguer absence légitime, valeur vide correcte et contenu insuffisant. Le nombre brut d’erreurs ne suffit pas : une icône d’action sans nom pèse davantage sur le parcours qu’une centaine de décorations correctement ignorées.
Qualifier les cohortes avant de chiffrer la reprise
La cohorte utile se construit par gabarit et par fonction : images de produit, logos de partenaires, portraits, pictogrammes d’action, graphiques, captures d’écran et décorations. Cette segmentation permet d’échantillonner les vrais cas et de corriger une règle de composant plutôt que mille occurrences issues de la même erreur.
Par exemple, si 70 % des cartes d’un catalogue reprennent exactement le titre dans le alt, alors le seuil d’enquête peut être déclenché sur ce composant. Ce pourcentage reste local : il sert à ouvrir une revue qualitative, jamais à affirmer que toute répétition est incorrecte.
3. Arbre de décision : informatif, fonctionnel, décoratif ou complexe
La classification ne cherche pas à ranger définitivement un fichier. Elle qualifie son usage dans une page précise. Une image peut changer de catégorie lorsqu’elle passe d’un hero éditorial à un bouton ou d’une galerie à une décoration de fond.
Image informative : transmettre ce que le contenu voisin ne dit pas
Une image informative apporte une donnée, une identité ou un état. L’alternative décrit cette contribution sans commencer par « image de » lorsque la nature visuelle n’est pas nécessaire. Un portrait peut nommer la personne ; une photo de défaut peut indiquer la fissure visible et son emplacement.
La formulation reste orientée vers l’usage. « Veste bleue, coupe droite, vue de face » apporte une information de variante ; « beau produit de qualité » exprime un jugement marketing. La première formulation peut aider la décision, la seconde ajoute du bruit sans remplacer le visuel.
Image fonctionnelle : annoncer l’action ou la destination
Lorsque l’image est l’unique contenu d’un bouton ou d’un lien, son alternative doit donner le nom accessible de l’action. « Imprimer la facture » est plus utile que « icône imprimante » ; « Retour à l’accueil » est plus clair que « logo Dawap » si le logo sert de lien.
Si un libellé visible fournit déjà le nom, l’image peut devenir décorative pour éviter une annonce doublée. La QA doit tester l’ensemble du composant, car l’attribut seul ne révèle pas toujours le nom accessible calculé par le navigateur.
Image décorative : utiliser une valeur vide, pas un oubli
Une décoration n’apporte ni information ni fonction et peut être ignorée. Pour un élément img, alt="" signale explicitement ce choix. Omettre l’attribut n’est pas équivalent : certaines technologies peuvent alors annoncer le nom du fichier ou un autre fragment indésirable.
Une image de fond CSS peut convenir lorsque le visuel est réellement décoratif. Elle ne doit pas servir à cacher une information indispensable, car celle-ci disparaîtrait du HTML accessible et pourrait ne pas exister dans le rendu sans feuille de style.
Image complexe : associer résumé bref et explication complète
Un graphique, une carte ou un schéma dense ne tient pas honnêtement dans une phrase. L’alternative brève identifie l’objet et son enseignement principal ; les données ou l’explication détaillée apparaissent dans le contenu voisin, un tableau ou une ressource liée accessible.
Cette solution profite à tous les lecteurs et reste maintenable. Elle évite une description interminable dans le flux du lecteur d’écran, tout en conservant les valeurs, les tendances et les exceptions nécessaires à la compréhension.
4. Écrire une alternative qui dépend vraiment du contexte
La description utile est concise, spécifique et proportionnée à l’information perdue. Elle ne répète pas la légende, le titre du lien ou le paragraphe immédiatement adjacent. Elle ne cherche pas non plus à raconter tous les détails visuels lorsque deux d’entre eux suffisent à accomplir la tâche.
La documentation W3C WAI sur les images accessibles distingue les usages et insiste sur le contexte. Pour le SEO, les bonnes pratiques officielles de Google Images recommandent une alternative descriptive et mettent en garde contre l’accumulation de mots-clés.
Comparer la version avec et sans image
Une relecture efficace masque temporairement le visuel et remplace l’image par la valeur du alt. Le contenu reste-t-il compréhensible ? L’action reste-t-elle nommée ? Une information est-elle répétée deux fois ? Ce test simple révèle mieux la pertinence qu’un score de longueur.
Par exemple, une capture d’écran de formulaire peut avoir pour alternative « Erreur de TVA affichée sous le champ pays » si le paragraphe explique le correctif. Si l’image sert de tutoriel complet, les étapes doivent plutôt exister dans le contenu visible afin de rester consultables, copiables et traduisibles.
Traduire le sens, pas seulement la chaîne
Une traduction automatique peut conserver une phrase grammaticalement correcte tout en perdant la fonction. Les noms de produits, les destinations, les abréviations et les conventions locales demandent une relecture dans la page traduite. L’alternative doit suivre la langue du contenu et la même source de vérité que le visuel.
Le workflow prévoit donc une invalidation lorsque l’image, son contexte ou son usage change. Modifier un recadrage sans changer l’information ne demande pas forcément une nouvelle phrase ; remplacer une personne, une variante ou un schéma exige en revanche une revue.
5. Industrialiser dans le CMS et les composants sans automatiser le sens
Le CMS doit enregistrer une décision de rôle avant d’exiger une description. Un champ unique obligatoire pousse les contributeurs à saisir « image », le nom du fichier ou une suite de mots-clés. Un meilleur modèle propose au minimum : décoratif, informatif, fonctionnel ou complexe, puis affiche les champs pertinents.
Les composants front traduisent cette décision dans le HTML. Ils doivent permettre une valeur vide explicite, refuser l’absence accidentelle et éviter d’injecter automatiquement le titre du contenu dans chaque image. Une valeur par défaut silencieuse est pratique jusqu’au jour où elle duplique des milliers de cartes.
Règles automatiques et revue humaine ne couvrent pas le même risque
La CI peut détecter un img sans attribut, un composant qui ignore la valeur vide ou une modification qui supprime le nom d’un bouton. Elle peut aussi surveiller les valeurs génériques, les chaînes identiques à grande échelle et les alt anormalement longs comme signaux d’enquête.
Elle ne sait pas conclure seule qu’une description est pertinente. La revue humaine conserve donc un échantillon par gabarit, par langue et par rôle. Le seuil de revue dépend de la volumétrie, du risque du parcours et du niveau de réutilisation du composant.
Garder la source de vérité au bon niveau
Une description attachée au fichier peut convenir si l’image garde la même fonction partout. Dès que le contexte change, la valeur doit pouvoir être surchargée au niveau du bloc ou de la page. Le DAM conserve les propriétés du média ; le contenu porte l’intention locale.
Cette séparation réduit les conflits entre e-commerce, éditorial et application. Elle facilite aussi la reprise : l’équipe peut corriger le composant, la donnée centrale ou seulement l’usage fautif, sans écraser les cas déjà justes.
6. Plan d’action : reprendre le parc sans bloquer la publication
Le chantier commence par une cartographie, pas par une réécriture exhaustive. Il faut compter les images par gabarit, extraire les valeurs absentes, vides et répétées, puis relier chaque occurrence au composant et à la source de données. Cette vue distingue une erreur systémique d’un problème éditorial local.
- D’abord, corriger les images fonctionnelles sans nom et les images informatives critiques sur les parcours à forte valeur.
- Ensuite, traiter les composants partagés qui omettent l’attribut ou recopient une valeur identique sur toutes les occurrences.
- Puis, conserver les valeurs vides justifiées et documenter la règle afin qu’un audit automatique ne les transforme pas en faux positifs.
- À différer, placer les descriptions de médias secondaires tant que les fonctions, graphiques et contenus principaux ne sont pas stabilisés.
- À refuser, bloquer les générateurs de mots-clés ou les valeurs construites uniquement depuis le nom du fichier.
Pilote, seuils locaux et retour arrière
Le pilote porte sur un gabarit représentatif et une langue. Les responsabilités, les dépendances du CMS, les seuils de revue et le rollback du composant sont inscrits dans le runbook. L’instrumentation compte les rôles, les valeurs vides justifiées et les erreurs bloquantes sans confondre quantité et qualité.
La journalisation relie chaque sortie à la version du composant et à la cohorte testée. Si le lecteur d’écran annonce davantage de doublons, si une action perd son nom ou si le taux de valeurs génériques dépasse la baseline locale, alors l’équipe applique le repli et corrige la règle avant d’élargir.
Scénario de déploiement sur un catalogue
Un catalogue peut commencer par les 200 fiches qui concentrent le plus d’interactions, avec un échantillon de vingt pages par famille de visuels. Si plus de deux erreurs fonctionnelles subsistent ou si les descriptions produit divergent des variantes visibles, alors le seuil de sortie n’est pas atteint. Ces valeurs sont un exemple de pilote local.
La seconde vague traite les cartes de listing et les recommandations. Elle ne reprend pas aveuglément la description des fiches : sur une carte dont le lien annonce déjà le produit, une image vide peut produire un nom accessible plus sobre. La validation compare le parcours complet avant de généraliser.
7. Tester avec technologies d’assistance, HTML rendu et données SEO
La QA combine inspection du HTML, navigation au clavier et essai avec au moins une technologie d’assistance représentative de l’environnement ciblé. Elle vérifie le nom accessible des liens, l’ordre des annonces et la présence de l’information complexe en dehors de l’image.
Sur une application JavaScript, le contrôle compare la source, le DOM après rendu et les transitions internes. Un composant SSR peut fournir un attribut correct, puis l’hydratation peut le remplacer ou le supprimer. Le test porte donc sur l’état réellement utilisé, pas uniquement sur le template.
Séparer accessibilité, découverte et indexation
Le alt contribue à la compréhension des images par les moteurs, mais il ne garantit ni indexation dans Google Images ni progression de la page. Le crawl dépend aussi des routes, du statut, du HTML, des liens et de l’accessibilité du fichier à Googlebot.
La canonical de la page, le cache du CDN, les sitemaps images et les logs répondent à d’autres questions. Les regrouper dans un seul score ferait croire qu’une description corrige un fichier bloqué ou une page non indexable. Le monitoring garde ces signaux séparés et documente leurs interactions.
Contrôles de non-régression en CI
Les tests automatiques s’assurent qu’un composant img rend toujours un attribut, qu’un bouton illustré conserve un nom et qu’une image marquée décorative reste vide. Une capture de l’arbre d’accessibilité peut compléter les tests unitaires sur les parcours les plus sensibles.
Après release, la QA relit un lot court en production, vérifie les erreurs de console, les routes média et les valeurs issues du CMS. Une revalidation ou une ancienne entrée de cache peut servir un HTML différent de celui validé en préproduction ; le contrôle différé ferme cette zone grise.
8. Erreurs fréquentes : remplissage, doublons et noms de fichiers
Remplir toutes les valeurs. Cette consigne transforme les décorations en annonces inutiles et encourage les contributeurs à inventer une phrase. Le modèle doit autoriser explicitement une valeur vide justifiée.
Dupliquer le contenu voisin. Une carte qui annonce deux fois le même produit rallonge la navigation sans ajouter d’information. Le test porte sur le nom accessible de l’ensemble, pas sur l’image isolée.
Utiliser le nom du fichier. Une valeur comme IMG_2048-final-v2.webp n’explique ni contenu ni fonction. Renommer le fichier peut servir la maintenance, mais ne remplace pas une décision contextuelle.
Générer une liste de mots-clés. Google déconseille le bourrage de mots-clés dans les attributs. Cette pratique dégrade aussi l’expérience des utilisateurs de lecteurs d’écran et produit un contenu difficile à traduire.
Automatiser une description par IA sans validation de contexte
Un modèle peut reconnaître des objets, mais il ignore souvent pourquoi l’image se trouve ici, quelle donnée est déjà couverte par la page et quelle action le composant déclenche. Une proposition automatique peut aider un contributeur, jamais remplacer la responsabilité éditoriale sur les usages sensibles.
Le risque augmente sur les personnes, les situations ambiguës et les informations réglementées. La politique doit préciser les cas où la suggestion est interdite, les données envoyées au fournisseur et la manière de corriger une description après changement du visuel.
9. Lectures complémentaires sur images et performance
Les textes alternatifs ne règlent ni le poids, ni la découverte, ni les dimensions réservées. Ces sujets demandent des contrôles distincts afin de ne pas attribuer à l’accessibilité des effets qui viennent du transport ou du rendu.
Images responsives et choix de variante
Le navigateur doit recevoir une variante adaptée au viewport sans changer l’information annoncée. Les attributs srcset et sizes traitent la ressource ; l’alternative textuelle reste attachée au sens commun du visuel dans ce contexte.
La mise en œuvre est détaillée dans l’analyse des images responsives.
Sitemaps images et vidéos
Un sitemap média peut aider Google à découvrir des ressources difficiles à trouver, mais il ne garantit pas leur indexation. Il doit rester cohérent avec les pages canoniques et l’inventaire réellement publié.
Le protocole complet figure dans la gouvernance des sitemaps images et vidéos.
Formats modernes et performance
WebP et AVIF peuvent réduire le poids selon le contenu et les réglages, mais le format ne détermine pas la qualité du texte alternatif. Les deux décisions doivent partager le même inventaire sans être fusionnées.
Les arbitrages de compatibilité et de qualité sont présentés dans le comparatif AVIF et WebP.
10. Conclusion : rendre l’information disponible sans surdécrire
Une bonne stratégie alt commence par la fonction et la perte d’information, jamais par une longueur cible ou un quota de champs remplis. Elle accepte qu’une décoration reste vide, qu’une action porte un nom direct et qu’un graphique demande une explication visible plus longue.
La qualité se construit dans le CMS, les composants et la revue de contexte. Les contrôles automatiques trouvent les absences et les patrons suspects ; les tests assistifs et la lecture humaine décident si l’alternative remplit réellement sa fonction.
Le pilote doit conserver des seuils locaux, une cohorte témoin et un retour arrière. Cette discipline réduit la dette et les régressions sans promettre un gain de ranking, car l’accessibilité, la découverte des images et l’indexation restent des dimensions liées mais distinctes.
Pour modéliser les rôles, corriger les composants et installer une QA durable, l’accompagnement SEO technique de Dawap relie données, rendu et accessibilité dans un plan de production mesurable.
