Google reCAPTCHA est devenu quasiment omniprésent pour protéger les sites web contre le spam et les abus automatisés. Dans sa dernière version, reCAPTCHA v3, Google affiche uniquement un petit badge (badge) en bas à droite de la page. Bien que ce badge réponde aux critères d'attribution, il peut s'avérer incompatible avec le design de votre site ou distraire les utilisateurs. Dans cet article, je vous explique comment supprimer ce badge de votre site, notamment si vous utilisez WordPress, sans enfreindre les conditions d'utilisation de Google.
Pendant de nombreuses années, Google a proposé reCAPTCHA v2 (deuxième version), qui invitait les utilisateurs à résoudre des énigmes basées sur des images ou à cocher une case pour prouver leur appartenance à un humain. Bien qu'efficace, ce système compliquait l'expérience utilisateur et nécessitait parfois plusieurs défis au cours d'une même session. Pour remédier à ce problème, Google a introduit reCAPTCHA v3 (troisième version), qui s'exécute entièrement en arrière-plan et attribue à chaque requête un score de risque. Le seul élément visible est un petit badge renvoyant vers la politique de confidentialité et les conditions d'utilisation de Google.
Avant de masquer le badge, il est crucial de comprendre les exigences légales de Google. Selon FAQ reCAPTCHAVous pouvez masquer le badge à condition d'inclure une mention visible ailleurs dans le parcours utilisateur, généralement dans le pied de page de votre site. Cela permet de garantir que les utilisateurs sont toujours informés que votre site est protégé par la technologie anti-bot de Google.
Google recommande d'ajouter l'avis suivant à votre pied de page :
Ce site est protégé par reCAPTCHA et la politique de confidentialité de Google. Politique de Confidentialité et Conditions d'utilisation appliquer.Une fois cette attribution ajoutée, masquer le badge est simple. Ajoutez cette ligne CSS à votre feuille de style :
.grecaptcha-badge { visibilité : masqué ; }Si vous préférez, vous pouvez l'insérer directement dans votre <head> section:
.grecaptcha-badge { visibility: hidden; }Sur WordPress, le moyen le plus simple est d'aller sur Apparence → Personnaliser → CSS supplémentaire et collez l'extrait. Cette approche permet de conserver le badge dans le flux du document, permettant ainsi aux scripts reCAPTCHA de s'exécuter correctement, tout en le rendant invisible pour les utilisateurs.
Important: Ne pas utiliser affichage : aucun ; sur le badge. Le supprimer complètement du DOM peut empêcher le script reCAPTCHA de se charger ou de signaler correctement les scores de risque, ce qui désactive la protection anti-spam et expose vos formulaires aux robots. visibilité : caché ; garantit que le badge reste présent dans le balisage sans être visible.
Avantages de cacher le badge
Vous vous demandez peut-être pourquoi cacher le badge. Voici les principaux avantages :
- Des visuels plus élégants:Le badge peut chevaucher des éléments importants de l'interface utilisateur ou sembler déplacé, en particulier sur les écrans mobiles.
- UX améliorée:Avec reCAPTCHA v3 fonctionnant de manière invisible, les utilisateurs finaux ne rencontreront aucun clic ni énigme supplémentaire.
- Image de marque cohérente:La suppression des éléments d’interface utilisateur tiers permet de conserver une conception propre et cohérente.
Dépannage et meilleures pratiques
- Si le badge apparaît toujours, effacez le cache de votre navigateur et tout cache CDN pour vous assurer que votre nouveau CSS est appliqué.
- Utilisez les outils de développement de votre navigateur pour inspecter le
.grecaptcha-badgeélément et confirmez qu'aucune autre feuille de style ne remplace votre règle. - Vérifiez que le texte d’attribution de votre pied de page est clairement visible et correspond à la formulation recommandée par Google.
- Consultez régulièrement la documentation de Google au cas où leur politique concernant la visibilité des badges changerait.
Considérations relatives à l'accessibilité
Même si le badge est invisible, assurez-vous que votre site reste accessible :
- Utilisez du HTML sémantique pour l'attribution de votre pied de page afin que les lecteurs d'écran puissent l'annoncer correctement.
- Assurez-vous que le masquage du badge n’interfère pas avec l’ordre de mise au point ou la navigation.
En suivant ces étapes simples, vous pouvez maintenir une intégration sans badge de reCAPTCHA v3 tout en conservant sa puissante protection anti-spam intégrée. Cette solution préserve la propreté de votre interface, améliore la convivialité et répond aux exigences légales de Google. Si vous rencontrez des problèmes ou avez des questions, n'hésitez pas à laisser un commentaire ci-dessous. Bon codage !
Photo de Caio
