Handbuch · Kapitel 5

Das wirklich.ai Badge für die eigene Website

Stand: 5. August 2026

Im vorigen Kapitel ging es um die offiziellen EU-Icons. Die sitzen am Inhalt, direkt am Bild, am Video, am Text. Sie beantworten die Frage: Ist dieses eine Ding KI-generiert?

Das Badge beantwortet eine andere Frage: Wie geht diese Website insgesamt mit KI-Inhalten um? Es sitzt im Footer oder in der Sidebar, nicht am Asset.

Beides zusammen ergibt erst ein vollständiges Bild. Und es ist wichtig, die beiden nicht zu verwechseln: Das Badge ersetzt keine Kennzeichnung am Inhalt.

Was das Badge sagt

Auf dem Siegel steht „KI-Transparenz” und ein Verweis auf Artikel 50 der KI-Verordnung. Im Info-Tooltip steht, dass KI-generierte Inhalte dieser Website nach dem Verhaltenskodex zur Transparenz von KI-generierten Inhalten gekennzeichnet werden, dem freiwilligen EU-Instrument zu Artikel 50, und dass Erfassung und Dokumentation mit wirklich.ai erfolgen.

Was das Badge ausdrücklich nicht sagt

Das ist der wichtigere Teil, und wir haben lange daran gefeilt.

Es ist keine Zertifizierung. Wir sind keine notifizierte Stelle, keine Behörde und keine Prüforganisation. Es gibt für Artikel 50 auch kein Zertifizierungsverfahren, die Wirtschaftskammer Österreich stellt ausdrücklich fest, dass es derzeit keine zentrale Prüfstelle gibt und das Risiko der Fehleinschätzung beim Anwender liegt.

Es bescheinigt keine Rechtskonformität. Die EU-Kommission schreibt zu ihren eigenen Icons, dass deren Verwendung für sich genommen keine Rechtskonformität darstellt und Betreiber weiterhin dafür verantwortlich bleiben, dass jede Offenlegung den Anforderungen des Artikels 50 entspricht. Für unser Badge gilt dasselbe, nur noch deutlicher.

Es behauptet keine Unterzeichnung des Kodex. Die Kommission stellt klar, dass die Verwendung der EU-Symbole durch Nichtunterzeichner nicht als Signal für die Einhaltung des Kodex ausgelegt werden soll. Der Kodex wird in einem eigenen Verfahren unterzeichnet, vom Betreiber der Website, nicht von uns.

Wenn Sie den Kodex tatsächlich unterzeichnet haben, können Sie das sagen. Wenn nicht, sagt das Badge korrekterweise nur, dass gekennzeichnet wird.

Was es dann überhaupt bringt

Eine faire Frage. Drei Dinge:

Es macht eine unsichtbare Arbeit sichtbar. Kennzeichnung am einzelnen Bild sieht nur, wer genau dieses Bild betrachtet. Das Badge zeigt, dass dahinter ein Vorgehen steht.

Es verweist auf überprüfbare Angaben. Über das öffentliche Transparenzprotokoll kann jeder nachsehen, wie viele Assets erfasst sind, wie viele gekennzeichnet wurden und wann zuletzt geprüft wurde. Das ist der Unterschied zwischen einer Behauptung und einer nachschlagbaren Angabe.

Es erklärt. Der Info-Tooltip nennt Artikel 50, den Kodex und verlinkt auf die Kommissionsseite. Für die meisten Besucher ist das die erste Berührung mit dem Thema.

Was Sie bekommen

Zwei Formate, sechs Farbfassungen:

Siegel, hochformatig, für Sidebar und Footer-Spalten. Quer, kompakt, für Footer-Zeilen und schmale Leisten.

Fassungen: hell, dunkel, gold, monochrom, dunkelgrün, salbei. Die monochrome ist die, die im Druck und auf Seiten mit eigener strenger Farbwelt funktioniert.

Verhalten

Im Ruhezustand zeigt das Badge das Zeichen geschlossen. Beim Überfahren mit der Maus öffnet es sich, die Blätter ziehen sich zusammen und „AI” erscheint in der Mitte. Auf Touchgeräten passiert nichts, dort gibt es kein Hover, und ein simulierter Hover, der nach einem Tap hängenbleibt, wäre schlechter als keiner.

Die Bewegung ist Dekoration. Die Information steht im Standbild.

Barrierefreiheit

Das Badge ist mit Tastatur bedienbar, der Info-Button hat ein aria-label, der Tooltip ist als role="tooltip" ausgezeichnet und öffnet auf :focus, nicht nur auf :hover. Wer prefers-reduced-motion gesetzt hat, bekommt keine Animation.

Das ist nicht Kosmetik: Artikel 50 Absatz 5 verlangt, dass die Informationen den geltenden Barrierefreiheitsanforderungen entsprechen.

Einbau

Zwei Zeilen: ein Container dort, wo das Siegel stehen soll, und einmal pro Seite das Script.

<!-- wirklich.ai · Trust-Badge -->
<div data-wirklich-badge data-format="seal" data-theme="auto"></div>
<script src="https://cdn.wirklich.ai/badge.js"
        data-wirklich-site="IHRE-SITE-ID" async></script>

Die Site-ID bekommen Sie im Tool. Sie steuert, worauf die Wortmarke verlinkt, auf das öffentliche Transparenzprotokoll Ihrer Domain.

Attribute am Container

Attribut	Werte	Standard
`data-format`	`seal` (hoch), `bar` (quer)	`seal`
`data-theme`	`auto`, `light`, `dark`	`auto`
`data-mark`	`mono`, `gold`	`mono`

auto folgt dem Farbschema der Kundenseite. Wer mehrere Siegel auf einer Seite braucht, setzt einfach mehrere Container, das Script bedient alle.

Warum kein fertiges HTML zum Kopieren

Naheliegender wäre, das komplette Markup auszugeben. Zwei Gründe sprechen dagegen.

Die Maske im Zeichen braucht eine ID. Auf einer fremden Website ist nicht vorhersehbar, welche IDs schon vergeben sind und wer das Siegel zweimal einbaut, hätte zwei Elemente mit derselben ID. Dann greifen beide auf dieselbe Maske zu und die Form bricht. Das Script vergibt die ID pro Instanz selbst.

Fremdes CSS greift durch. Ein globales svg { transition: all .3s } oder ein * { letter-spacing: 2px } reicht, um das Siegel zu zerlegen, solche Regeln stehen in mehr Stylesheets, als man denkt. Das Badge rendert deshalb im Shadow DOM, in den von außen nichts hineinreicht.

Nebeneffekt: Wenn sich am Siegel etwas ändert, müssen Sie nichts austauschen.

Was Sie beachten sollten

Mindestgrößen. Das Siegel ist auf etwa 146 Pixel Breite ausgelegt, die Leiste auf 220. Wer es per CSS kleiner skaliert, läuft in die Aussparung im Zeichen.

Das Script ist asynchron. Bis es geladen ist, nimmt der Container keinen Platz ein. Wenn das Springen im Layout stört, reservieren Sie ihn per CSS: [data-wirklich-badge] { min-height: 150px; display: inline-block; }

Animation nur bei echtem Mauszeiger. Auf Touchgeräten passiert nichts, ein simulierter Hover, der nach einem Tap hängenbleibt, wäre schlechter als keiner. Bei gesetztem prefers-reduced-motion entfällt sie ebenfalls.

Die anderen beiden Scripte

Das Badge ist optional und das dritte von drei Scripten. Die Kennzeichnung selbst läuft über label.js, das öffentliche Protokoll über protokoll.js, siehe Kapitel 3.

Wo das Badge nicht hingehört

Nicht anstelle der Kennzeichnung am Inhalt. Der Verhaltenskodex verlangt für die Icons, dass sie direkt in den Inhalt eingebettet werden und spätestens bei der ersten Exposition wahrnehmbar sind. Ein Siegel im Footer erfüllt das nicht.

Nicht auf Seiten, die gar keine KI-Inhalte haben. Dann sagt es nichts.

Nicht als Ersatz für ein Impressum oder eine Datenschutzerklärung. Es ist ein Hinweis, kein Rechtstext.

Und wenn Sie das Tool nicht nutzen?

Dann brauchen Sie das Badge nicht. Die Kennzeichnungspflicht erfüllt man am Inhalt, nicht mit einem Siegel. Wer ohne Werkzeug arbeitet und trotzdem zeigen will, wie er mit KI umgeht, kann eine eigene Seite dazu schreiben, das ist inhaltlich gleichwertig und kostet nur Text.

Dieser Beitrag beschreibt ein eigenes Produkt und gibt daneben den Verordnungstext sowie Angaben der EU-Kommission wieder. Er ist keine Rechtsberatung.

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

Quellen

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