Ce que propose le widget, et ce qu’il ne propose pas
« Buttons must have discernible text » : ce message d’un outil d’audit automatique comme axe DevTools résume précisément le défaut le plus fréquent rencontré sur le widget Social Icons d’Elementor. Ce widget gratuit propose un contrôle de type repeater, dans lequel chaque élément ajouté correspond à une icône de réseau social choisie dans une bibliothèque intégrée, associée à un lien de destination. Le panneau Contenu de chaque élément du repeater se limite à un choix d’icône et à un champ d’URL : aucun champ de texte descriptif dédié n’accompagne nativement chaque icône ajoutée, contrairement à ce qu’offre par exemple le widget Icon List, pensé pour du contenu plus détaillé avec son propre champ de texte visible.
Le comportement réel pour un lecteur d’écran
Concrètement, un lien social ajouté sans texte associé se traduit, dans le code HTML généré, par un lien entourant uniquement une icône décorative, sans mot pour l’identifier. Un lecteur d’écran parcourant la page annonce alors un lien vide ou, au mieux, lit l’URL brute de destination si le navigateur choisit de la restituer par défaut, sans jamais préciser qu’il s’agit d’un lien vers un profil Facebook, LinkedIn ou un autre réseau. Ce comportement n’est pas un bogue du widget : c’est la conséquence directe et prévisible de l’absence de tout texte accessible associé à l’icône, une situation à laquelle il faut remédier explicitement plutôt qu’attendre une correction automatique du plugin.
Les pièges qui reviennent en audit d’accessibilité
Le piège le plus fréquent consiste à considérer que le simple choix d’une icône reconnaissable, le logo LinkedIn par exemple, suffit à rendre le lien compréhensible. C’est vrai visuellement pour un utilisateur voyant qui reconnaît la forme du logo, mais totalement faux pour un utilisateur de lecteur d’écran, qui ne perçoit ni la forme ni la couleur de l’icône. Un second piège touche les équipes qui pensent, à tort, qu’ajouter un texte visible à côté de chaque icône réglerait le problème automatiquement : sans lien direct entre ce texte et l’élément cliquable correspondant, un lecteur d’écran peut très bien continuer à annoncer les deux éléments séparément, sans jamais les associer.
- Ne jamais présumer qu’une icône reconnue visuellement l’est également par un utilisateur de lecteur d’écran
- Ajouter un texte accessible directement lié à chaque lien, pas seulement un texte visuellement proche
- Faire tester la page avec un lecteur d’écran réel après toute correction, plutôt que de se fier au seul rendu visuel
Corriger un widget Social Icons existant
Sur un pied de page institutionnel équipé de quatre icônes de réseaux sociaux sans aucun texte associé, un audit externe a signalé exactement ce défaut. La correction a consisté à ouvrir chaque élément du repeater, à dérouler l’onglet Avancé du contrôle, puis à ajouter, dans la section Attributs personnalisés propre à chaque icône, une paire clé-valeur au format attendu par Elementor pour injecter un attribut HTML supplémentaire sur le lien généré :
aria-label | Suivre notre page LinkedInCette syntaxe, propre au contrôle Attributs personnalisés d’Elementor, ajoute un attribut aria-label directement sur la balise <a> générée par le widget, sans toucher au rendu visuel de l’icône. Le code final produit par Elementor devient alors équivalent à ce que produirait ce balisage écrit à la main :
<a href="https://linkedin.com/company/exemple" aria-label="Suivre notre page LinkedIn">
<i class="fab fa-linkedin" aria-hidden="true"></i>
</a>
Répétée pour chaque icône du repeater, cette correction a suffi à faire disparaître l’anomalie signalée par l’outil d’audit, sans nécessiter le moindre développement personnalisé.
Une icône reconnaissable à l’œil n’est jamais un texte pour autant : chez WP Moderne, on considère qu’un lien sans nom accessible n’est tout simplement pas terminé.
Quand ne pas utiliser ce widget
Social Icons n’est pas la solution la plus claire si le lien vers un réseau social constitue une action importante du parcours, comme un lien de contact professionnel principal sur une page dédiée : un lien texte classique, visible et explicite, reste plus lisible pour tous les visiteurs qu’une icône seule, même correctement étiquetée pour les lecteurs d’écran. Il n’est pas non plus adapté si le besoin réel dépasse la simple liste de liens vers des profils, par exemple pour afficher un flux de publications sociales en direct : ce cas demande une intégration dédiée à la plateforme concernée, pas un simple widget d’icônes liées.
