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

Webflow 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.

Um Wawsome in Webflow einzubinden, fügen Sie Ihren Wawsome-Code unter Site settings > Custom code > Head code ein, speichern und veröffentlichen Ihre Website. Das Widget lädt dann auf jeder Seite.

‍

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.
  • Eine Webflow-Website mit aktivem Site-Plan oder ein bezahlter Workspace (Core, Growth, Agency oder Freelancer). Kostenlose Websites können keinen eigenen Code nutzen.

‍

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

‍

So binden Sie Wawsome in Webflow ein

‍

Webflow zeigt die Menüs auf Englisch, daher nennen wir sie hier so.

‍

  1. Öffnen Sie Ihre Website in Webflow und gehen Sie zu Site settings.
  2. Öffnen Sie den Tab Custom code.
  3. Fügen Sie Ihren Wawsome-Code unter Head code ein. Fügen Sie nur den kopierten Code ein, ohne html-, head- oder body-Tags drumherum.
  4. Klicken Sie auf Save changes.
  5. Klicken Sie auf Publish. Webflow übernimmt eigenen Code erst nach dem Veröffentlichen auf die Live-Website.

‍

Prüfen, ob es funktioniert

‍

Öffnen Sie Ihre veröffentlichte Website in einem privaten Fenster und suchen Sie den Wawsome-Button. Im Vorschaumodus sehen Sie ihn ebenfalls. Öffnen Sie ihn und testen Sie eine Einstellung.

‍

Was das Widget behebt und was nicht

‍

  • Besucher ändern Schriftgröße, Kontrast, Abstände und mehr und nutzen Lesehilfen.
  • KI ergänzt Alt-Texte für Bilder ohne Beschreibung. Sie können jeden Text bearbeiten.
  • Probleme im Design oder in CMS-Inhalten, etwa übersprungene Überschriftenebenen oder unklare Linktexte, beheben Sie in Webflow. Ein Scan listet sie pro Seite auf.

‍

Mehr dazu: Kostenlosen Scan starten · Barrierefreiheitsprüfung

‍

FAQ zur Barrierefreiheit in Webflow

‍

Brauche ich einen bezahlten Webflow-Plan?

‍

Ja. Eigener Code braucht einen aktiven Site-Plan oder einen Core-, Growth-, Agency- oder Freelancer-Workspace.

‍

Head code oder Footer code?

‍

Head code, so wie es im Wawsome-Dashboard steht. Der Code nutzt defer und bremst Ihre Seite nicht aus. Footer code funktioniert aber auch.

‍

Prüft Webflow die Barrierefreiheit?

‍

Ja. Das Audit-Panel im Designer meldet fehlende Alt-Texte, unklare Links und übersprungene Überschriften, bevor Sie veröffentlichen. Komponenten und an das CMS gebundene Bilder prüft es nicht. Ein Wawsome-Scan prüft die veröffentlichten Seiten, auch die CMS-Inhalte.

‍

Starten Sie mit Wawsome

‍

Machen Sie Ihre Webflow-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