Skip to main content
Anleitungen
Drupal barrierefrei: Wawsome-Widget einbinden
veröffentlicht
November 4, 2026
Lesezeit

Drupal barrierefrei: Wawsome-Widget einbinden

Ist Ihre Website gefährdet?

Erfolgreiches Scannen
Hoppla! Beim Absenden des Formulars ist etwas schief gelaufen.
Indem Sie auf Jetzt scannen klicken, bestätigen Sie, dass Sie mit unseren Nutzungsbedingungen.

Drupal hat kein eingebautes Feld für Code auf der ganzen Website. Binden Sie Wawsome mit dem Modul Asset Injector ein, oder lassen Sie Ihren Entwickler den Code ins Theme einfügen. Leeren Sie danach alle Caches.

‍

Bevor Sie starten

‍

  • Ein Wawsome-Konto, in dem Ihre Website angelegt ist. Ihren Code finden Sie im Dashboard: Öffnen Sie Websites, wählen Sie Ihre Website, klicken Sie auf Install Widget und im Fenster Connect Widget auf Copy code.
  • Adminrechte, um Module zu installieren, oder einen Entwickler, der Ihr Theme bearbeiten kann.

‍

Wawsome-Dashboard, Fenster Connect Widget mit dem Installationscode und dem Button Copy code

‍

Weg 1: Modul Asset Injector (ohne Code-Bearbeitung)

‍

Asset Injector nimmt JavaScript an, keine HTML-Tags. Sie fügen also eine kurze JavaScript-Version Ihres Wawsome-Codes ein. Dafür brauchen Sie nur Ihren API-Schlüssel: Das ist der Wert nach data-api-key= in Ihrem kopierten Code.

‍

Wir nennen die Menüs so, wie sie im englischen Backend heißen. Im deutschen Backend lauten sie etwas anders, liegen aber an derselben Stelle.

‍

  1. Installieren und aktivieren Sie das Modul Asset Injector.
  2. Gehen Sie zu Configuration > Development > Asset Injector > JS Injector und legen Sie einen neuen Injector an.
  3. Geben Sie einen Titel ein, etwa „Wawsome-Widget“.
  4. Fügen Sie diesen Code ein und ersetzen Sie YOUR_API_KEY durch Ihren Schlüssel:

‍

(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);
})();

‍

Lassen Sie die Bedingungen leer, damit der Code auf jeder Seite lädt, und klicken Sie auf Save.

‍

Weg 2: Code ins Theme einfügen

‍

Ihr Entwickler kann den Wawsome-Code ins Theme einfügen, zum Beispiel im Template html.html.twig im Kopfbereich oder als externes Skript in der libraries-Datei des Themes. So liegt der Code in Ihren Theme-Dateien und unter Versionskontrolle.

‍

Prüfen, ob es funktioniert

‍

Gehen Sie zu Configuration > Development > Performance und klicken Sie auf Clear all caches. Öffnen Sie dann Ihre Website in einem privaten Fenster und suchen Sie den Wawsome-Button.

‍

Fügen Sie den Code nicht in ein Inhaltsfeld ein. Die Textformate von Drupal entfernen Script-Tags, dann lädt er nicht.

‍

Was das Widget behebt und was nicht

‍

  • Besucher passen Text, Farben und Navigation an ihre Bedürfnisse an.
  • KI ergänzt Alt-Texte für Bilder ohne Beschreibung. Sie können jeden Text bearbeiten.
  • Theme und Inhalte brauchen weiter Pflege. Ein Scan findet Probleme wie fehlende Beschriftungen oder zu wenig Kontrast auf jeder Seite.

‍

Mehr dazu: Kostenlosen Scan starten · Barrierefreiheitsprüfung

‍

FAQ zur Barrierefreiheit in Drupal

‍

Geht es auch ohne Entwickler?

‍

Ja, mit dem Modul Asset Injector und der JavaScript-Version oben. Zum Installieren des Moduls brauchen Sie Adminrechte.

‍

Warum erscheint das Widget nicht?

‍

Leeren Sie zuerst alle Caches. Fehlt es dann noch, prüfen Sie, ob der API-Schlüssel stimmt und ob Bedingungen im Injector es ausblenden.

‍

Ist Drupal nicht schon barrierefrei?

‍

Der Drupal-Kern zielt auf WCAG 2.2 AA, und die Standard-Themes Olivero und Claro sind mit Blick auf Barrierefreiheit gebaut. Ihr eigenes Theme, Module und Inhalte können trotzdem Probleme bringen. Das Widget hilft Besuchern, die Seite anzupassen, und ein Scan zeigt, was noch zu beheben ist.

‍

Starten Sie mit Wawsome

‍

Machen Sie Ihre Drupal-Website für alle Besucher leichter nutzbar. Testen Sie Wawsome kostenlos oder buchen Sie eine Demo. Wir zeigen Ihnen, wie es funktioniert.

‍

Kostenlos testen oder Demo buchen (öffnet in neuem Tab).

‍

Weitere Anleitungen: Wawsome in jede Website einbinden · Installation mit Google Tag Manager