• English
CONTACT

EDIT 01/2020 : Le plugin Divi Alt Text n'est plus gratuit... Vous pouvez cependant consulter la page officielle Divi Alt Text (en anglais pour le moment, mais plugin traduit en français).

EDIT 21/04/2018 : Plugin v4.0, suite à mise à jour Divi 3.1.

EDIT 21/02/2018 : Plugin v3.0, corrections suite à mises à jour Divi, ajout des modules Slider, Fullwidth Image, Fullwidth Header, Fullwidth Slider.

EDIT 08/02/2018 : Plugin v2.0, suite à découverte d'une fonction native dans WordPress pour récupérer le texte alternatif à partir de l'URL d'une image.

Bonjour à tout-e-s, Suite à la sortie de Divi 3.1, une édition spéciale développeurs, j'ai dû mettre à jour mon plugin Divi Alt Text et la version utilisant un thème enfant. Je profite de la refonte du code Divi et de celle du plugin pour créer ce nouvel article qui regroupera les deux versions désormais identiques.

Contexte : la refonte du code des modules Divi

Cette nouvelle version de Divi a vu une grande partie de son code complètement remanié, pour le bien de tous ! On s'approche d'un code propre... Si-si ! Ainsi, hormis l'introduction des hooks WordPress, le code a été considérablement assaini, notamment dans la gestion des modules. Un vrai ménage de printemps ! Bien sûr il reste encore des améliorations possibles (optimisations, factorisations, décomposition ou hooks dans le rendu des modules), mais la modification de Divi devient de plus en plus abordable (je m'adresse quand même aux développeurs...) et surtout de façon SAINE.

Conséquence : refonte de Divi Alt Text

Voici donc le nouveau code permettant de récupérer les alt text des images pour les modules Image, Fullwidth Image, Blurb, Slider et Fullwidth Header. Vous noterez que j'ai supprimé le module Gallery de ce patch car d'une part Divi utilise automatiquement le titre comme alt text, donc celui-ci n'est pas vide comme pour les autres modules, et d'autre part il est impossible d'implémenter la solution qui suit pour ce module. J'ai donc préféré conserver un code propre et simple et illustrant des bonnes pratiques plutôt que de surcharger un gros volume de code dans le module Gallery comme j'avais fait dans les versions précédentes.

La récupération des alt text en bibliothèque

J'utilise toujours ma fonction "outil" pour récupérer le alt text en bibliothèque à partir du chemin de l'image.

Par rapport à la dernière version, j'ai ajouté la gestion des URL relatives pour les images (qui commencent par '/' et non pas 'http...'), puisque les chemins relatifs devraient être la norme dans tout WordPress (message subliminal pour Elegant Themes et de nombreux éditeurs de thèmes et plugins !).

Mise à jour des modules

La refonte du code de Divi m'a donné l'occasion de me pencher un peu plus sur la gestion des modules afin d'optimiser mon code, et surtout de ne pas trop surcharger celui des modules, dans le souci évident de limiter les impacts des futures mises à jour de Divi. C'est là que j'ai découvert que Divi utilisait (même avant la v3.1) les filtres WordPress. Comble de bonheur, on peut même appliquer un filtre sur les propriétés des modules avant leur rendu HTML ! Plus besoin de surcharger tout le code de rendu comme je le faisais avant, il suffit de mettre à jour la propriété alt text à la volée si elle n'est pas positionnée manuellement dans le module (priorité au alt text "manuel").

Page officielle du nouveau plugin Divi Alt Text

Découvrez une nouvelle version enrichie du plugin !

Télécharger Divi Alt Text officiel (à partir de Divi 3.1)

66 commentaires sur cet article

  1. Super, merci pour ton support, c'est vraiment cool... Ne voudrais tu pas le déposer sur le site WP et ou le proposer à élégant afin qu'ils l'intègrent de base ?

    1. Je leur avais déjà proposé le patch sur le forum de support quand j'ai écrit la version thème enfant, sans réponse...

  2. Un grand grand merci Yan.

    Je pense que je vais envoyer un message au support d'Elegant Themes pour leur demander : If they know in French the meaning ou "foutage de geule"....

  3. Wauw this is awesome. The international community will very soon pick up your plugin. Question, how can I also add this to the module "et_pb_fullwidth_image"?

    I have more than 400+ on my posts and now I've noticed that there are NO alt tags taken from the library....

    I will also posts this in the Elegant Themes support forums.

    1. Hey Matthias, thx !
      You just made me realize I hadn't even thought of the fullscreen modules...
      Will correct these as well as soon as I can.

  4. Bonjour Yan,
    Merci beaucoup pour ton plugin, c'est très gentil de nous le faire partager.
    Petite remaeque, je n'ai pas l'impression que les balises alt text s'affichent sur les images que l'on ajoute en fond. Est-ce bien le cas ?
    Merci par avance,
    Aude

    1. Bonjour,
      Oui c'est normal, l'attribut alt text n'est utilisable que pour les images classiques (balise ).
      En théorie les images de fond ne sont là que pour décorer et ne doivent pas contenir d'informations importantes pour le visiteur.
      Dans la pratique, aujourd'hui c'est différent, avec les designs modernes...
      Mais en tout cas l'attribut n'est pas disponible pour elles, donc pas d'inquiétude !

  5. bonjour,

    Merci pour le plugin

    Question : j'ai un site ecommerce. Ca me remplie le alt text de l image avec le nom du produit , et non avec le alt ext que j'ai rempli dans la bibliotheque.
    que dois je faire ?

    1. Bonjour Marie,

      Tu parles de Woocommerce ? Normalement le alt text est bien celui de la bibliothèque.
      Dans la liste des produits c'est OK par défaut. Pour une page produit, j'ai remarqué qu'avec le zoom activé le alt text n'était pas positionné.
      Mais en désactivant le zoom, avec le code suivant dans le functions.php de ton thème enfant, c'est OK :
      function remove_image_zoom_support() {
      remove_theme_support( 'wc-product-gallery-zoom' );
      }
      add_action( 'wp', 'remove_image_zoom_support', 100 );

      Tu utilises peut-être une extension qui modifie le code html de tes produits ?

      1. Bonjour Yan,

        Oui c'est woocommerce

        Dans la liste produit, apparemment c'est ok.
        Pour la page produit, je n'ai pas de zoom. Le Alt est le titre du produit et non le texte fournis dans la bibliothèque.
        Ca suffira pour le référencement naturel ?

        1. Je ne sais pas si ça "suffira", car le SEO devient de plus en difficile avec la concurrence, et ça dépend aussi du reste de ton site. Disons que c'est un moindre mal s'il est défini et s'il correspond quand-même à la photo. Après, c'est vrai que pour l'indexation des images, c'est un peu dommage car Google se base dessus, et une image trouvée peut amener du trafic aussi. En fait, le SEO n'est pas une science exacte, donc si je devais donner une seule réponse, je dirais qu'il ne faut rien négliger, car la concurrence, elle, risque de ne rien négliger.
          Enfin, et surtout, hors considération SEO, le alt text sert à décrire l'image pour renseigner les lecteurs d'écran utilisés par les non-voyant et déficients visuels, donc pour moi c'est indispensable. C'est également utile, mais dans une moindre mesure aujourd'hui, quand la photo n'a pas pu être chargée, afin de la décrire quand même (texte dans le cadre vide destiné à la photo).

          Essaie de voir si ton thème ou un plugin ne modifient pas l'affichage de tes produits...

  6. Thank you so much for writing this and providing it freely. It is frustrating that Elegant Themes chooses not to make this a priority. It's a bug and it's bizarre that they seem to think it's a feature. Anyway, thank you. You saved myself and our team a lot of work copying+pasting on our site.

  7. Bonjour,

    Maintenant que ET a mis à jour Divi pour la version 3.2, est-ce que votre plugin sera mis à jour afin de fonctionner correctement avec la nouvelle version de Divi?

    Merci,
    Diana

    1. Bonjour,
      Le plugin fonctionne avec Divi 3.2. Maintenant que j'ai réécrit le code avec un filtre, il sera beaucoup moins impacté par les mises à jour de Divi, mais aussi beaucoup plus pratique à maintenir, donc je le mettrai à jour à chaque fois que ce sera nécessaire.
      Même si c'est le travail d'ET de corriger ce bug...
      Yan.

      1. Merci beaucoup Yan de votre réponse rapide et de m'avoir éclairé 😉 En effet, ce genre de bug c'est à ET de corriger mais bon ... 🙂

        Encore merci et belle journée à vous!

        Diana

  8. Hi Yan. Thanks for sharing this - I only just heard about it today in the FB group. 🙂
    I have downloaded and installed your plugin OK. What is the easiest way to check that this is now working on my site ? I was thinking that I could now hover over my images, and the ALT text would appear after a second, but this is not happening (so I don't know if my images are setup correctly to use this).
    Thanks

    1. Hi, you're welcome !

      If you want to check, you can "inspect" the HTML code of any image with your browser, and you should see the "alt=..." attribute on the img tag.
      You can also use free online SEO validation tools to check if alt text are missing, or free crawlers like Screaming Frog.
      But you won't see any change front-end, unless the image is not loaded (then, the alt text is printed in the image placeholder).

      The text that appears when hovering is the title text when it is manually set in the modules settings (advanced tab), not the alt text.
      Alternate text is used for visually impaired screen readers or when image didn't load properly, and for SEO.
      It must be different from the title, for it has to describe the content of the image in a few words (16 max according to last studies).

      Hope everything is clear !
      Yan.

      1. That's great, Yan, thanks for your quick reply and detailed explanation.:-)
        I understand now, and can see the ALT text in my page as you described, for each of my images (although not for galleries).
        Thanks again.

        1. Yes I chose not to do it for galleries because it was not possible without overriding a lot of code (couldn't use the filter trick because there are no alt text settings in the gallery module) and because Divi automatically sets the image titles as alt texts, so the alt texts are not empty... the lesser of two evils !

          1. Please, tell me how to do it for a gallery. I need it there, and the titles are not good as alt (in my case).

          2. Hi Dogman,
            I'm gonna work on it as soon as possible, but couldn't find a (clean) way to do it yet...
            Except by overriding the whole render() function like I did in the previous version of the plugin, but I don't like that, regarding future updates.
            I keep you posted.

  9. Merci pour ce correctif, clair que l'équipe ET devrait intégrer les alt text depuis la biblio si le champs reste vide... C'est dingue que ça ne soit pas le cas.

    1. Je t'en prie ! La politique d'ET est clairement de faire faire tout le boulot aux autres, de toute façon. Quand tu vois le nombre de (très bons) plugins qui comblent les lacunes de Divi... Mais bon, depuis un moment ils se remuent un, et quand ils auront fini avec le bling-bling inutile, ils reviendront peut-être aux bases !

  10. Merci pour votre plugin! J'ai mettre la plugin dans une site Internet et vous avez corriger la probleme avec Divi et la bibliothque! J'espere Divi corriger la probleme tres bientot! S'il vois plait excusez mon francais (je suis de Londres!)

  11. Bonjour Yan,

    Merci pour le plugin. Savez-vous si google penalise le ranking lorsque le titre et le alt text sont identiques?

    Merci.

    Franck

    1. Hello,
      A ma connaissance non, mais les voies de Google sont impénétrables...
      En tout cas il dit clairement que le alt text est le plus important pour le SEO, puisque c'est cet attribut qui décrit l'image pour les non/mal voyants ou en cas de pb de chargement.
      Le titre permet surtout d'afficher une bulle d'aide si on ne veut pas afficher de légende sous l'image.
      Donc si c'est le même pour les deux, il faut que ce soit plus proche du alt text, donc plus "descriptif" que "titre".

      1. Merci beaucoup pour votre reponse et desole du retard dans la mienne.

        J'ai installe le plugin mais il ne recupere pas les alt img sur mon site... Pour le moment e le fais manuellement car divi prend le title comme alt tag et je cache ensuite le title avec le code:

        .page-id-xxxx .mfp-title {display: none !important;}
        .page-id-xxxxx h3.et_pb_gallery_title {display: none!important;}

        Mais bon c'est tres amateur j'imagine. Avez-vous une idee pourquoi le plugin ne fonctionne pas. Merci d'avance.

      2. Desole. Pour galleries... ce n'est pas senser fonctionner de toute facon:-). J'ai laisser trop de temps entre mes deux verif de site. Ca n'a pas l'air de reprendre le alt tag pour le reste des images non plus par contre.

        Merci d'avance.

        Franck

        1. Je me pencherai sur les galeries si ET ne le corrige pas rapidement, mais le code de ce module est beaucoup moins modulaire que les autres, et je n'ai pas trouvé de hook ou solution équivalente propre pour le faire. Il y a trop de code à dupliquer... Je l'avais fait pour la première version, avant Divi 3.1, mais là je trouve ça dommage de faire sale alors qu'ET pourrait améliorer son code facilement.

          Par contre pour les autres modules, je n'ai aucun souci, avez-vous bien téléchargé la dernière version du plugin ?

  12. Bonjour et merci pour ce patch !

    le patch ne fonctionne plus suite à la dernière maj divi ou c'est moi qui ai un problème ?

    1. Hello et de rien !
      Un pb de vue, peut-être ?
      Il y a un lien vers la nouvelle version en haut de l'article 😉

  13. Merci beaucoup pour ce plugin, c'est parfait !
    (Et je confirme qu'il fonctionne bien sous la dernière version de Divi à ce jour, soit la 3.9).

  14. Bravo et merci. Mais ça ne fonctionne pas avec les "images en avant" - featured images - des articles ? on récupère systématiquement le titre de l'article dans la variable ALT ?

    1. Salut,
      Effectivement je n'ai corrigé que les modules dont le alt text était vide (sauf la galerie), car si le titre est utilisé, c'est déjà moins pire.
      Et pour le reste, il y a beaucoup d'impacts sur le code car il n'est pas très modulaire, ce qui rendrait le patch trop dépendant des prochaines mises à jour.
      J'ai préféré garder un correctif minimal, et c'est quand même le boulot d'ET de corriger tout ça 😉

  15. Ce plugin est très sympa, il fait le job comme il faut et fonctionne avec la version 3.14.

    Mais que dire lors d'une image en background, celle-ci n'étant pas déclaré dans la source avec une balise <img> mais dans une classe de la section du module utilisé. Aucune balise alt prévue, pas de référencement de l'image du tout si je ne m'abuse. Je ne pense pas que cela vienne d'ET d'ailleurs.

    Et pourtant aujourd'hui dans les présentations, on aime souvent avoir une image en fond en plein écran avec du texte dessus.

    Comment procédez-vous dans ces cas là ?
    Avez-vous une astuce pour tout de même référencer la photo ?
    Merci.

    1. Bonjour,
      C'est une limitation HTML/CSS, on ne peut pas y faire grand-chose...
      Par contre pour le référencement on peut contourner le problème utilisant l'attribut "title" de l'élément avec l'image en fond, qui sera lu par les robots.

  16. Hello ! J'ai trouvé un petit bug avec le plugin :
    Sur une section fullwidth avec un slider, après la 2eme slide, le plugin fait sauter toutes les marges ou la disposition en tout cas du slider.

    1. Bonjour Maxime,
      Je n'arrive pas à reproduire le bug, peux-tu me donner une URL ou me décrire en détail la configuration des sections/modules ?
      Après ça me semble bizarre que ce soir le plugin car je ne touche pas au design, je ne fais que modifier le alt text des images...

      1. Merci Yan, j'ai mis à jour le plugin 🙂
        Est ce qu'on recupere aussi les balise alt des images en background sur les sections grace à ce plugin ?

        1. De rien !
          Non, les images en background ne disposent pas de alt text car elles ne sont pas représentées dans le code pas des balises <img/> ; ce sont des propriétés CSS des sections/lignes/module/etc.
          Historiquement, les images de fond servaient uniquement à la décoration (textures pas trop lourdes, par exemple), donc spécifiées en CSS. Aujourd'hui dans la pratique c'est différent, les débits ont évolué et on peut y mettre des grosses photos, mais le HTML/CSS ne propose pas (encore ?) de les décrire.

          1. Merci pour cette info. C'est vrai qu'on les utilise beaucoup et surtout sur Divi. J'ai bien tagué les balises alt de ces images, et j'aurai bien aimer les referencer.
            Est ce que tu vois une solution pour ca? Je ne trouve pas de plugin de sitemap d'image qui crawl ces background.
            Je sais que Yoast redirige les URL des fichiers joints aux médias, dans ses options SEO / Media . Je desactive par defaut cela car ca crée une pseudo page contenant l'image, qui n'aboutit à rien.

          2. Il y a une (pseudo) solution que j'ai lue plusieurs fois, qui consiste à utiliser l'attribut "title" de l'élément avec l'image en background. Mais je ne saurai dire comment Google interprète ça, et je ne pense pas qu'il indexe l'image.
            Je fais comme toi pour Yoast, et je ne connais pas d'autre outil pour faire ce que tu souhaites.
            Si je dois vraiment référencer une image, je me débrouille pour la mettre dans un <img/> 😉

  17. Bonjour,

    Merci pour ce plugin !
    Petite question, avez-vous des pistes pour essayer de faire fonctionner ce plugin combiné à WPML et WPML media, car pour le moment il récupère bien les balises alt (merci encore) mais ne change pas la balise selon la langue choisi.

    1. Hello, et de rien !!
      Non désolé, je n'utilise pas WPML et je ne sais pas comment il stocke ses informations.
      En fait, avec ce plugin je voulais simplement pallier un manque dans Divi en attendant qu'ET le corrigent eux-mêmes.
      C'est leur boulot de nous fournir un thème aux normes...

  18. Bonjour,

    Il y a-t-il quelque chose à faire en plus pour installer correctement ce plugin ? Je viens de le faire et Yoast m'indique toujours qu'il n'y a pas de texte alternatif dans mes images ... alors qu'il y en a
    Merci d'avance !

      1. Merci de votre réactivité 🙂
        Toujours rien du côté des attributs alt ... j'utilise également un plugin CSS Hero, peut-etre qu'un des plugin rentre en conflit ou quoi ?
        Autre question, les images en Background ne sont pas comptées comme des images dans le site, c'est bien ça ?

        1. Je ne connais pas CSS Hero. Envoyez-moi l'URL, si vous voulez.
          Et non, effectivement, les images en arrière-plan sont spécifiées en CSS et ne possèdent pas l'attribut.

          1. Sur votre site les attributs alt text sont bien positionnés pour les modules image, tout me semble OK.
            Il faudra juste les renseigner un peu mieux 😉

  19. Bonjour et merci pour ce petit plugin très efficace 🙂

    Je voulais savoir si vous aviez une idée pour que lightbox n'affiche pas en légende le texte ALT et bien le TITLE sous l'image. Car ça ne fait pas très joli des mots clés SEO au lieu du titre réel sous l'image à afficher aux visiteurs...

    Merci encore

    1. Bonjour Fred,
      Effectivement je n'avais jamais constaté ce bug !!! Merci pour l'info 🙂

      Pour le corriger dans le code, c'est très simple, il faut trouver le bloc suivant dans le fichier /includes/builder/module/Image.php :
      if ( 'on' === $show_in_lightbox ) {
      $output = sprintf( '<a href="%1$s" class="et_pb_lightbox_image" title="%3$s">%2$s</a>',
      esc_attr( $src ),
      $output,
      esc_attr( $alt )
      );
      Et ensuite remplacer $alt par $title_text (l'idéal serait la légende plutôt que le titre, mais elle n'est pas gérée par Divi).

      Malheureusement, je n'ai pas de solution propre pour patcher le code avec un plugin ou dans le thème enfant.
      Donc cette modification du code sera perdue à la prochaine mise à jour de Divi.

      Pour info, sur le forum de support Divi, l'info a déjà été remontée par un utilisateur il y a près d'un an :
      https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=837510&hilit=image+lightbox+alt+title&p=4601579#p4601579

      Mais bon, on connait malheureusement la réactivité exemplaire d'ET sur ce genre de choses...

  20. Je suis tellement déçue de Divi... je viens de me rendre compte qu'on doit faire un boulot en plus en ajoutant le alt text dans les "advanced setting"... =( Merci de nous fournir un plugin qui facilite la vie ! En revanche je vois que les images en background n'ont pas d'attribut alt visible, conseillez-vous d'utiliser tout de même cette méthode ou bien d'utiliser le module image ?

    1. Bonjour Laura, désolé pour le délai, j'étais bien pris ces derniers jours...
      Pour moi il n'y a aucune contrindication à utiliser les images en background. Au contraire, si c'est leur rôle, allez-y !
      Maintenant, si c'est une image importante et qui nécessite d'être référencée, alors ça se discute, et il est peut-être mieux de la placer dans un module pour le alt text.
      Personnellement, comme je n'ai jamais de demande très pointue d'un client pour le SEO des images, je les traite de la façon la plus naturelle possible, donc module ou background en fonction de son utilisation dans le design, la mise en page, etc.

  21. Bonjour Yan,

    Un grand merci pour ce super plug-in.

    Jusqu'à présent il fonctionnait bien, je voulais vous signaler que depuis la mise à jour de Divi 3.21.2, il entre en conflit avec le thème (bug d'affichage des images et lors de l'utilisation du divi builder).

    1. Bonjour,
      C'est bizarre car en 3.21.4 tout fonctionne pour moi.
      Avez-vous désactivé toutes les autres extensions ? Il y a peut-être un conflit, mais ce n'est pas Divi a priori.

Laisser un commentaire

Votre adresse IP ne sera pas collectée.
Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain ;-)