Handbuch · Kapitel 3.1

KI-Kennzeichnung in Webflow

Stand: 5. August 2026

Redaktioneller Hinweis für die interne Abstimmung: Die mit ⚑ markierten Abschnitte enthalten Produktangaben, die vor Veröffentlichung geprüft und mit den tatsächlichen Schritten ersetzt werden müssen. Sie sind bewusst leer gelassen statt geraten.

Was die Kennzeichnung leisten muss

Bevor es um Webflow geht, die Anforderungen, sie ergeben sich aus dem Verordnungstext und dem Verhaltenskodex, nicht aus der Plattform.

Artikel 50 Absatz 5 der KI-Verordnung verlangt, dass die Informationen den betroffenen Personen spätestens zum Zeitpunkt der ersten Interaktion oder Aussetzung in klarer und eindeutiger Weise bereitgestellt werden und den geltenden Barrierefreiheitsanforderungen entsprechen.

Der Verhaltenskodex der EU-Kommission enthält in Abschnitt 2 detaillierte Platzierungsvorgaben, zu deren Umsetzung sich Unterzeichner verpflichten. Die Kommission fasst auf ihrer Seite zu den EU-Icons als unvollständige Zusammenfassung zusammen:

deutlich wahrnehmbar und unterscheidbar spätestens bei der ersten Exposition
platziert, wo keine dazwischenliegenden Overlay-Elemente vorhanden sind
direkt in den Inhalt eingebettet, außer bei kreativen Werken oder wenn gleichwertige Alternativen wie ein Benutzeroberflächen-Overlay verfügbar sind
sichtbar, wenn Inhalte erneut geteilt oder heruntergeladen werden

Zur Barrierefreiheit nennt die Kommission unter anderem eine deutlich sichtbare Größe, einfache Sprache im begleitenden Etikett und, nach Möglichkeit, Lesbarkeit durch assistive Technologien mittels Alt-Text oder ARIA-Labels.

Der Kodex ist freiwillig. Die Kennzeichnungspflicht aus Artikel 50 ist es nicht.

Was daraus für die Umsetzung folgt

Aus den genannten Vorgaben ergeben sich drei technische Konsequenzen:

Sichtbar, nicht nur in Metadaten. Die Anforderung, dass die Information bei der ersten Aussetzung wahrnehmbar sein muss, ist mit einer reinen Metadatenlösung nicht erfüllt.

Nicht überlagert. Play-Buttons, Verläufe, Consent-Banner und Lightbox-Overlays sind an der Stelle des Hinweises problematisch.

Zugänglich ausgezeichnet. Ein Symbol als CSS-Hintergrundbild trägt keinen Alt-Text. Ein <img> mit sinnvollem alt oder ein Element mit aria-label erfüllt die genannte Empfehlung, ein reines Dekorationselement nicht.

Wege in Webflow

Webflow bringt nach unserem Kenntnisstand kein eigenes Feld und keine eigene Funktion für die Kennzeichnung KI-generierter Inhalte mit. ⚑ Vor Veröffentlichung prüfen, ob sich das geändert hat.

Damit bleiben die üblichen Mittel der Plattform:

Bildunterschrift. Ein Textelement unter dem Bild. Erfüllt die Sichtbarkeitsanforderung, ist gestalterisch aber nicht überall möglich.

Overlay im Bildcontainer. Ein Wrapper mit position: relative, darin ein Element mit position: absolute. Nach den Vorgaben so zu platzieren, dass keine anderen Elemente darüberliegen.

CMS-Feld. Bei Bildern aus einer Collection: ein Schalterfeld anlegen und im Template ein bedingt sichtbares Element daran binden. Der einzige der drei Wege, der mit dem Bestand mitwächst.

Zu beachten ist außerdem, dass Webflow Bilder über ein CDN ausliefert und automatisch Varianten erzeugt. Was in der Mediathek liegt, ist nicht identisch mit dem, was der Browser lädt. ⚑ Konkretes Verhalten bei Metadaten im Webflow-Upload vor Veröffentlichung verifizieren, wir haben dazu keine belastbare Quelle und wollen nichts behaupten.

Wo das Werkzeug ansetzt

Der Einbau folgt dem Muster, das man von Consent-Tools kennt: Script einmal einbauen, Inhalte kommen aus dem Register.

Script 1: Kennzeichnung. Kommt in den <head> und läuft auf allen Seiten. In Webflow unter Site Settings → Custom Code. Es kennzeichnet die Medien, die im Tool als kennzeichnungspflichtig eingestuft wurden, mit dem EU-Piktogramm und dem hinterlegten Tooltip. Unter 5 kB, lädt asynchron, setzt keine Cookies.

<!-- wirklich.ai · KI-Kennzeichnung -->
<script src="https://cdn.wirklich.ai/label.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Script 2: Transparenzprotokoll. Kommt auf eine Unterseite, etwa /ki-transparenz, verlinkbar aus Impressum oder Footer, analog zur Cookie-Erklärung bei Consent-Tools. Es zeigt Prüfstand, Ergebnisse, Stand des Fälschungsschutzes und das KI-Inventar, und aktualisiert sich selbst. Vom Inventar werden nur Name, Anbieter und Zweck ausgespielt; interne Anmerkungen bleiben privat.

<!-- wirklich.ai · KI-Transparenzprotokoll -->
<div id="wirklich-protokoll"></div>
<script src="https://cdn.wirklich.ai/protokoll.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Script 3: Trust-Badge. Optional, siehe Kapitel 5.

Domain-Bindung

Im Tool lässt sich festlegen, auf welchen Domains die Scripte laufen. Sinnvoll bei Webflow, weil neben der eigenen Domain immer auch die webflow.io-Staging-Adresse existiert.

⚑ Noch zu ergänzen: Ablauf beim Verbinden des Webflow-Projekts, Verhalten bei Bildvarianten aus dem Webflow-CDN.

Andere Plattformen

Die Anbindung läuft aktuell mit Webflow. Sanity, Astro, Framer und Strapi sind in Vorbereitung.

Dieser Beitrag gibt den Verordnungstext und die Angaben der EU-Kommission wieder. Er ist keine Rechtsberatung.

Dieser Text wurde mit Unterstützung von KI erstellt und redaktionell geprüft.

Quellen

Status: entwurf

Dieser Text wurde mit Unterstützung von KI erstellt und redaktionell geprüft.