Skip to main content
Tutoriels
Accessibilité Drupal : ajouter le widget Wawsome
Publié
November 4, 2026
temps de lecture

Accessibilité Drupal : ajouter le widget Wawsome

Votre site Web est-il en danger ?

Succès de la numérisation
Oups ! Une erreur s'est produite lors de l'envoi du formulaire.
En cliquant sur Scanner maintenant, vous confirmez que vous êtes d'accord avec notre Conditions générales d'utilisation.

Drupal n’a pas de champ intégré pour ajouter du code à tout le site. Pour ajouter Wawsome, utilisez le module Asset Injector, ou demandez à votre développeur d’ajouter le code au thème. Videz ensuite tous les caches.

‍

Avant de commencer

‍

  • Un compte Wawsome avec votre site ajouté. Votre code se trouve dans le tableau de bord : ouvrez Websites, choisissez votre site, cliquez sur Install Widget, puis sur Copy code dans la fenêtre Connect Widget.
  • Des droits d’administration pour installer des modules, ou un développeur qui peut modifier votre thème.

‍

Tableau de bord Wawsome, fenêtre Connect Widget avec le code d’installation et le bouton Copy code

‍

Option 1 : le module Asset Injector (sans toucher au code)

‍

Asset Injector accepte du JavaScript, pas de balises HTML. Vous collez donc une version JavaScript courte de votre code Wawsome. Il vous suffit de votre clé API : c’est la valeur après data-api-key= dans le code copié.

‍

Nous citons les menus tels qu’ils apparaissent dans l’administration en anglais. En français, les noms changent un peu, mais ils sont au même endroit.

‍

  1. Installez et activez le module Asset Injector.
  2. Allez dans Configuration > Development > Asset Injector > JS Injector et ajoutez un nouvel injecteur.
  3. Donnez-lui un titre, comme « Widget Wawsome ».
  4. Collez ce code et remplacez YOUR_API_KEY par votre clé :

‍

(function () {
  var s = document.createElement('script');
  s.src = 'https://loader.wawsome.com';
  s.setAttribute('data-api-key', 'YOUR_API_KEY');
  s.defer = true;
  document.body.appendChild(s);
})();

‍

Laissez les conditions vides pour qu’il se charge sur chaque page, puis cliquez sur Save.

‍

Option 2 : ajouter le code au thème

‍

Votre développeur peut ajouter le code Wawsome au thème, par exemple dans le template html.html.twig, dans le head, ou comme script externe dans le fichier libraries du thème. Le code reste ainsi dans les fichiers du thème, sous gestion de versions.

‍

Vérifier que tout fonctionne

‍

Allez dans Configuration > Development > Performance et cliquez sur Clear all caches. Ouvrez ensuite votre site dans une fenêtre de navigation privée et cherchez le bouton Wawsome.

‍

Ne collez pas le code dans un champ de contenu. Les formats de texte de Drupal suppriment les balises script, et le code ne se chargera pas.

‍

Ce que le widget corrige, et ce qu’il ne corrige pas

‍

  • Vos visiteurs adaptent le texte, les couleurs et la navigation à leurs besoins.
  • L’IA ajoute un texte alternatif aux images qui n’en ont pas. Vous pouvez modifier chaque description.
  • Votre thème et vos contenus demandent toujours de l’attention. Un scan trouve les problèmes, comme des étiquettes manquantes ou un contraste faible, sur chaque page.

‍

En savoir plus : Lancer un scan gratuit · Audit d’accessibilité

‍

FAQ sur l’accessibilité Drupal

‍

Puis-je ajouter le code sans développeur ?

‍

Oui, avec le module Asset Injector et la version JavaScript ci-dessus. Il vous faut des droits d’administration pour installer le module.

‍

Pourquoi le widget ne s’affiche-t-il pas ?

‍

Videz d’abord tous les caches. S’il n’apparaît toujours pas, vérifiez votre clé API et assurez-vous que l’injecteur n’a pas de conditions qui le masquent.

‍

Drupal n’est-il pas déjà accessible ?

‍

Le cœur de Drupal vise le niveau WCAG 2.2 AA, et ses thèmes par défaut, Olivero et Claro, sont pensés pour l’accessibilité. Votre thème, vos modules et vos contenus peuvent quand même créer des problèmes. Le widget aide vos visiteurs à adapter la page, et un scan montre ce qu’il reste à corriger.

‍

Lancez-vous avec Wawsome

‍

Rendez votre site Drupal plus simple à utiliser pour tous vos visiteurs. Commencez votre essai gratuit, ou réservez une démo et nous vous montrons comment Wawsome fonctionne.

‍

Commencer l’essai gratuit ou réserver une démo (s’ouvre dans un nouvel onglet).

‍

Autres guides : Ajouter Wawsome à n’importe quel site · Installer avec Google Tag Manager