Comment gérer l’attribut alt des images purement décoratives ?

Par l’équipe Limpi. Les faits externes sont distingués des méthodes Limpi et aucune visibilité, position ou citation automatique n’est garantie.

Comprendre le problème

Une image purement décorative ne transmet aucune information nécessaire à la compréhension ou à l’action. Le contrôle consiste donc d’abord à décider si le visuel apporte un contenu, puis à vérifier que son alternative textuelle reflète cette décision. Une décoration exposée comme une image informative peut encombrer la lecture assistée ; à l’inverse, vider l’alternative d’un visuel porteur de sens fait disparaître une information utile.

Inspecter le comportement réellement servi

Inventoriez les balises img, les SVG intégrés, les icônes et les images de fond sur plusieurs gabarits. Pour chaque occurrence, notez le contexte, le texte voisin, la fonction du visuel et la valeur de alt lorsqu’elle existe. Testez le rendu dans l’arbre d’accessibilité plutôt que de conclure à partir du seul code source. Une même illustration peut être décorative dans une carte et informative dans une autre page.

Distinguer les mécanismes proches

Séparez trois cas : image informative, image fonctionnelle et image décorative. Une image informative demande une alternative qui restitue l’information pertinente ; une image servant de contrôle doit décrire l’action ou la destination ; une image sans information utile peut utiliser un alt vide lorsqu’elle est portée par img. Ne confondez pas alt absent et alt vide : ces états ne communiquent pas la même intention aux outils d’assistance.

Identifier les causes probables

Les erreurs viennent souvent de CMS qui rendent alt obligatoire sans contexte, de banques d’images dont le nom de fichier devient automatiquement le texte alternatif, ou de composants qui réutilisent la même valeur sur toutes les images. Les SVG décoratifs peuvent aussi recevoir un titre inutile, tandis qu’une icône fonctionnelle peut être masquée alors qu’aucun texte visible ne reprend son sens.

Corriger à la bonne couche

Corrigez à la couche qui connaît la fonction réelle du visuel. Pour une décoration dans une balise img, utilisez un alt vide et évitez de répéter un texte déjà présent à côté. Pour une image informative, rédigez une alternative concise adaptée à ce que l’utilisateur doit comprendre. Si l’image est purement cosmétique et gérée en CSS, ne créez pas artificiellement une alternative séparée sans contenu à transmettre.

Traiter les cas limites sans automatisme

Les logos, graphiques, captures d’écran et images contenant du texte ne doivent pas être classés décoratifs par automatisme. Un séparateur visuel peut être décoratif, alors qu’une icône d’état rouge ou verte peut porter une information. Pour un SVG complexe, analysez le résultat réellement exposé dans l’arbre d’accessibilité et vérifiez qu’une technique de masquage ne supprime pas une information indispensable.

Valider sur des cas réels

Refaites le parcours avec les images désactivées puis avec un lecteur d’écran ou l’inspecteur d’accessibilité. La compréhension de la page et des actions essentielles doit rester intacte. Vérifiez aussi qu’une décoration n’est pas annoncée sous forme de nom de fichier ou de description redondante. Conservez au moins un exemple informatif et un exemple décoratif pour montrer pourquoi leurs traitements diffèrent.

Conserver une preuve reproductible

Dans le rapport, enregistrez l’URL, le sélecteur ou composant, le rôle du visuel, l’alt observé et la décision retenue. Une preuve exploitable indique pourquoi l’image est décorative ou informative et permet de reproduire le contrôle. Si plusieurs occurrences proviennent du même composant, comptez-les et corrigez le composant source plutôt que chaque page isolément.

Prévenir la régression

Documentez dans le design system quand alt doit être vide, rédigé ou fourni par une donnée métier. Ajoutez des exemples positifs et négatifs aux composants image, carte et bouton iconique. Les tests automatiques peuvent détecter un alt absent, mais ils ne savent pas toujours décider si une image est réellement décorative ; gardez donc une revue sémantique sur les nouveaux usages.

Clôturer le diagnostic

La conclusion doit rester simple : le texte alternatif dépend de la fonction de l’image dans son contexte. Une décoration ne doit pas ajouter de bruit aux technologies d’assistance, et une image qui porte une information ne doit pas être rendue silencieuse. Réévaluez le diagnostic après changement de contenu ou de composant, car le statut décoratif n’est pas une propriété permanente du fichier lui-même.

Construire une matrice de contrôle

Pour attribut alt des images décoratives, construisez une matrice qui sépare constat, intention, couche propriétaire et preuve finale. Le périmètre documentaire de cette page est volontairement borné : Distinguer une image décorative d’une image informative et expliquer l’usage d’un texte alternatif vide lorsqu’aucune information utile n’est transmise. Ajoutez au minimum le contexte de test, la valeur observée, le résultat attendu, l'origine technique supposée puis confirmée, et la méthode de revalidation. Quand plusieurs gabarits partagent le même composant, échantillonnez des cas représentatifs plutôt que de multiplier des constats identiques. Une anomalie ambiguë doit rester en revue jusqu'à ce qu'une preuve distingue clairement configuration, contenu et comportement réellement servi. Cette matrice permet aussi de vérifier qu'une correction locale ne masque pas un problème global et qu'un changement d'infrastructure n'est pas confondu avec une décision éditoriale.

Relier ce contrôle au reste du diagnostic

Ce sujet ne doit pas être traité isolément. Vérifiez les pages et contrôles liés /site/accessibilite, /seo/texte-alternatif-images, /site/liens-nom-accessible, puis comparez leurs conclusions avec l'intention « images decoratives alt accessibilite ». Les sources officielles associées à cette page sont w3c_non_text; elles bornent les affirmations externes et doivent être revalidées si leur documentation évolue. Ne transformez pas une recommandation Limpi en règle universelle : distinguez ce qui est imposé par une spécification, ce qui dépend d'un moteur ou navigateur et ce qui relève d'un choix d'implémentation. Terminez par un contrôle de cohérence entre title, H1, contenu visible, canonical, maillage et données structurées. Si deux signaux se contredisent, conservez le cas en revue au lieu de conclure sur la base d'un seul outil. Consignez enfin la date du contrôle, le gabarit concerné et le propriétaire de la correction afin de pouvoir rejouer exactement le même scénario après une évolution du site.

Sources officielles

Les règles des moteurs et des fournisseurs de crawlers peuvent évoluer. Les affirmations techniques de cette page sont bornées par les documentations officielles ci-dessous.

• w3c non text