Was passiert bei einem dekorativen Bild?

Ist ein Bild rein dekorativ, wird normalerweise ein leerer Alt-Text verwendet:

<img src="/bild.jpg" alt="">

Das leere Alt bedeutet für den Screenreader: Das Bild selbst vermittelt keine relevante Information. Das Bild wird normalerweise nicht als eigenständiges Bild angesagt. Für ein wirklich dekoratives Bild ist das korrekt und entspricht der Logik von WCAG 1.1.1.

KI-Kennzeichnung

Angenommen, ein Bild ist dekorativ, muss aber als KI-generiert gekennzeichnet werden.

<figure>
  <img src="/bild.jpg" alt="">
  <figcaption>KI-generiertes Bild</figcaption>
</figure>

Für einen sehenden Nutzer ist die Situation eindeutig: Er sieht das Bild und daneben die Kennzeichnung „KI-generiertes Bild“. Für einen Screenreader-Nutzer ist die Situation anders. Das Bild wird wegen des leeren Alt-Texts nicht als eigenständiges Bild angesagt. Anschließend kann der Nutzer lediglich hören: „KI-generiertes Bild.“ Damit stellt sich die Frage: Was ist mit „Bild“ gemeint? Der Nutzer hat gerade kein Bild wahrgenommen.

Warum „KI-generiertes Bild“ allein nicht immer ausreicht

Das Problem ist nicht, dass der Screenreader den Text vorliest. Das Problem ist vielmehr der fehlende Kontext.

Ein sehender Nutzer sieht:

Bild → KI-generiertes Bild

Ein Screenreader-Nutzer hört möglicherweise nur:

„KI-generiertes Bild.“

Die visuelle Beziehung zwischen Kennzeichnung und Bild muss deshalb auch in der zugänglichen Struktur sinnvoll vermittelt werden.

Bild und Kennzeichnung sind unterschiedliche Informationen

Ein Bild kann verschiedene Arten von Informationen enthalten:

• Bildinhalt: „Mann arbeitet an einem Laptop“
• Linkziel: „KI im Webdesign“
• Herkunft: „KI-generiertes Bild“

Diese Informationen haben unterschiedliche Funktionen und sollten nicht automatisch in einen einzigen Text gepackt werden.

• Der Alt-Text beantwortet die Frage: Welche relevante Information vermittelt das Bild?
• Der Linktext beantwortet die Frage: Wohin führt der Link?
• Die KI-Kennzeichnung beantwortet die Frage: Wie wurde das Bild erzeugt?

Verlinkte Bilder machen die Sache noch interessanter

<figure>
  <a href="/artikel">
    <img src="/bild.jpg" alt="Mann arbeitet an einem Laptop">
    <span>KI im Webdesign</span>
  </a>
  <figcaption>Bild: KI-generiert.</figcaption>
</figure>

Hier gibt es drei Informationen:

• „Mann arbeitet an einem Laptop“ – Bildbeschreibung
• „KI im Webdesign“ – Linkziel
• „Bild: KI-generiert.“ – Herkunft des Bildes

Diese Trennung ist sinnvoll, weil jede Information eine andere Aufgabe erfüllt.

Warum der Alt-Text nicht einfach das Linkziel sein muss

Bei einem verlinkten Bild wird manchmal angenommen, dass der Alt-Text immer das Linkziel beschreiben muss. Das ist zu pauschal. Wenn das Bild der einzige Inhalt des Links ist, muss sein zugänglicher Name natürlich den Linkzweck vermitteln:

<a href="/artikel">
  <img src="/bild.jpg" alt="KI im Webdesign">
</a>

Anders sieht es aus, wenn Bild und Text gemeinsam verlinkt sind:

<a href="/artikel">
  <img src="/bild.jpg" alt="Mann arbeitet an einem Laptop">
  <span>KI im Webdesign</span>
</a>

Hier gibt es bereits einen sichtbaren Text, der den Linkzweck vermittelt. Das ist relevant für WCAG 2.4.4 – Linkzweck (in Kontext), Level A.

Was aber, wenn das Bild informativ ist?

Ein informatives Bild darf nicht einfach mit einem leeren Alt-Text versehen werden, nur weil es sich innerhalb eines Links befindet.

<a href="/artikel">
  <img
    src="/diagramm.jpg"
    alt="Anteil KI-generierter Designs stieg von 20 auf 45 Prozent">
  <span>KI im Webdesign</span>
</a>

Hier erfüllen Alt-Text und Linktext unterschiedliche Aufgaben: Der Alt-Text vermittelt die Information des Diagramms, während der Linktext das Linkziel beschreibt.

Die besondere Schwierigkeit bei dekorativen KI-Bildern

Angenommen, das Bild ist wirklich dekorativ:

<img src="/bild.jpg" alt="">

Das Bild ist für den Screenreader nicht vorhanden. Trotzdem soll eine relevante Information vermittelt werden:

„KI-generiert“

Hier entsteht das eigentliche Dilemma: Das Bild selbst wird nicht angesagt, die Information über seine Herkunft soll aber trotzdem zugänglich sein. Deshalb darf man nicht aus „Das Bild ist dekorativ“ ableiten, dass auch sämtliche Informationen über das Bild irrelevant sind.

Die Kennzeichnung sollte eindeutig formuliert sein

Eine mögliche Umsetzung ist:

<figure>
  <img src="/bild.jpg" alt="">
  <figcaption>Bild: KI-generiert.</figcaption>
</figure>

Dadurch wird die Information als eigenständige Aussage formuliert. Ein Screenreader kann sinngemäß vorlesen: „Bild: KI-generiert.“ Damit ist die Information verständlicher, als wenn lediglich „KI-generiertes Bild“ ohne weiteren Kontext ausgegeben wird.

Kann small für die KI-Kennzeichnung verwendet werden?

Für die Kennzeichnung eines KI-generierten Bildes kann auch das HTML-Element small verwendet werden. Die KI-Kennzeichnung kann beispielsweise als ergänzende Information innerhalb einer figcaption stehen:

<figure>
  <img src="/bild.jpg" alt="Mann arbeitet an einem Laptop">
  <figcaption>
    <small>KI-generiertes Bild</small>
  </figcaption>
</figure>

Die einzelnen Elemente haben dabei unterschiedliche Aufgaben:

• figure gruppiert das Bild und die zugehörigen Informationen.
• figcaption stellt die Beschriftung beziehungsweise ergänzende Information zum Bild bereit.
• small kennzeichnet den Inhalt als ergänzende beziehungsweise nachgeordnete Information.

Wichtig ist dabei: small bedeutet nicht, dass die Information für Screenreader-Nutzer unwichtig ist oder nicht vorgelesen werden soll. Der Inhalt bleibt normaler Text und kann von assistiven Technologien wahrgenommen werden.

Die kleinere Darstellung, die Browser standardmäßig für small verwenden, ist dabei nur die visuelle Umsetzung. Die semantische Bedeutung von small liegt darin, dass der Inhalt als sogenannte „side comment“ beziehungsweise als ergänzende oder nachgeordnete Information ausgezeichnet wird.

Auch bei einem dekorativen Bild kann diese Struktur verwendet werden:

<figure>
  <img src="/bild.jpg" alt="">
  <figcaption>
    <small>KI-generiertes Bild</small>
  </figcaption>
</figure>

Hier bleibt das Bild selbst für den Screenreader dekorativ. Die Information über die Herkunft des Bildes wird dagegen als eigenständiger Text bereitgestellt. Damit muss die Information „KI-generiert“ nicht künstlich in den Alt-Text aufgenommen werden.

Gerade für die Accessibility-Frage ist diese Trennung interessant: Der Alt-Text beschreibt bei Bedarf den Bildinhalt, während die Bildunterschrift zusätzliche Informationen zum Bild aufnehmen kann. Die KI-Kennzeichnung kann innerhalb dieser Bildunterschrift mit small als ergänzende Information ausgezeichnet werden.

Die Kennzeichnung darf nicht nur technisch vorhanden sein

Bei der KI-Transparenz muss zwischen einer maschinenlesbaren Kennzeichnung und einer für Menschen wahrnehmbaren Kennzeichnung unterschieden werden. Eine technische Kennzeichnung kann beispielsweise Informationen darüber enthalten, dass ein Inhalt KI-generiert wurde. Das bedeutet aber nicht automatisch, dass ein Screenreader-Nutzer diese Information wahrnehmen kann. Eine sichtbare Kennzeichnung wie „KI-generiertes Bild“ muss deshalb bei Bedarf auch für Nutzer assistiver Technologien zugänglich sein.

WCAG 4.1.2 – Name, Rolle, Wert

Ein weiteres relevantes Kriterium ist WCAG 4.1.2 – Name, Rolle, Wert.

Besonders wichtig wird dies, wenn ein Bild allein als Link verwendet wird:

<a href="/artikel">
  <img src="/bild.jpg" alt="">
</a>

In diesem Fall fehlt möglicherweise ein sinnvoller zugänglicher Name für den Link.

Wird dagegen ein aussagekräftiger Text innerhalb des Links verwendet, ist die Situation anders:

<a href="/artikel">
  <img src="/bild.jpg" alt="">
  <span>KI im Webdesign</span>
</a>

Das eigentliche Dilemma

Damit stehen sich zwei Anforderungen gegenüber:

• Das Bild ist dekorativ → ein leerer Alt-Text
• Die Information „KI-generiert“ ist relevant → Die Information muss zugänglich sein.

Die Lösung besteht deshalb nicht darin, alles in den Alt-Text zu schreiben. Stattdessen sollten Bildbeschreibung, Linkziel und KI-Kennzeichnung als unterschiedliche Informationen behandelt werden.

Was passiert bei einem aria-label am Link?

Eine weitere wichtige Besonderheit entsteht, wenn die gesamte Abbildung innerhalb eines Links liegt und der Link ein aria-label erhält:

<a href="/artikel" aria-label="Target AI in Web Design">
  <figure>
    <img src="/bild.jpg" alt="Mann arbeitet an einem Laptop">
    <figcaption>AI-generated image</figcaption>
  </figure>
</a>

Das aria-label bestimmt den zugänglichen Namen des Links. Der Screenreader orientiert sich für die Ansage des Links deshalb an „Target AI in Web Design“. Die Informationen aus dem Bild und der Bildunterschrift werden dadurch nicht automatisch Bestandteil des zugänglichen Namens des Links.

Für einen sehenden Nutzer sind dagegen mehrere Informationen gleichzeitig vorhanden:

• das Bild,
• die Bildbeschreibung beziehungsweise der visuelle Bildinhalt,
• die Bildunterschrift „AI-generated image“,
• und der Link.

Für einen Screenreader-Nutzer kann der Link dagegen im Wesentlichen als „Target AI in Web Design, Link“ angesagt werden. Die Information „AI-generated image“ wird nicht dadurch Teil des Linknamens, dass sie als Bildunterschrift innerhalb des Links steht.

Das ist ein wichtiger Unterschied: Ein aria-label ist nicht einfach eine zusätzliche Information. Es legt den zugänglichen Namen des Elements fest und kann damit die Namensberechnung aus dem vorhandenen Inhalt ersetzen. Deshalb sollte ein aria-label nicht verwendet werden, wenn dadurch bereits vorhandene relevante Informationen aus dem zugänglichen Kontext verdrängt werden.

Aber was ist mit einem verlinkten figure?

Interessant wird die Situation auch bei einem verlinkten figure ohne zusätzliches aria-label:

<a href="/artikel">
  <figure>
    <img src="/bild.jpg" alt="Mann arbeitet an einem Laptop">
    <figcaption>AI-generated image</figcaption>
  </figure>
</a>

Hier sollte man ebenfalls nicht einfach davon ausgehen, dass alle sichtbaren Inhalte automatisch zu einem sinnvollen Linknamen werden. Die Bildalternative, die Bildunterschrift und der Zweck des Links sind unterschiedliche Informationen. Deshalb sollte man zunächst überlegen, welche Information der Link selbst benötigt und welche Informationen zusätzlich zum Bild gehören.

Ein figure ist zunächst eine semantische Gruppierung von Bild und zugehöriger Beschriftung. Daraus folgt nicht automatisch, dass die Bildunterschrift zum zugänglichen Namen eines übergeordneten Links wird.

Gerade bei der KI-Kennzeichnung ist diese Unterscheidung wichtig: Die Information „AI-generated image“ kann eine eigenständige Information über das Bild sein und muss nicht zwangsläufig Teil des Linknamens werden.

Eine mögliche Konsequenz: sichtbarer Text statt Bildunterschrift

Eine andere mögliche Struktur ist, die Kennzeichnung als sichtbaren Text innerhalb des Links auszugeben:

<a href="/artikel" aria-label="Target AI in Web Design">
  <img src="/bild.jpg" alt="">
  <span>AI-generated image</span>
</a>

Auch hier bleibt jedoch das Problem des aria-label bestehen: Durch das explizite Label wird der zugängliche Name des Links auf „Target AI in Web Design“ festgelegt. Der Text „AI-generated image“ wird dadurch nicht automatisch Bestandteil dieses Linknamens.

Wenn die Kennzeichnung für Screenreader-Nutzer relevant ist, sollte man deshalb nicht allein darauf vertrauen, dass ein sichtbarer Text innerhalb eines mit aria-label versehenen Links automatisch angesagt wird. Das Beispiel zeigt, warum man bei aria-label sehr genau prüfen sollte, welche Informationen dadurch für assistive Technologien noch verfügbar sind.

Was sollte man daraus ableiten?

Die zentrale Frage lautet daher nicht nur: „Wo schreibe ich KI-generiert hin?“, sondern auch: „Zu welchem Element gehört diese Information und wie wird sie für assistive Technologien zugänglich?“

Wenn „AI-generated image“ eine relevante Information ist, sollte diese Information nicht versehentlich durch ein aria-label am übergeordneten Link aus dem für Screenreader zugänglichen Kontext verdrängt werden.

Das spricht dafür, aria-label sparsam einzusetzen und zunächst zu prüfen, ob der sichtbare Inhalt bereits einen ausreichenden zugänglichen Namen für den Link liefert.

Best-Practice-Beispiel: dekoratives Bild

<figure>
  <a href="/artikel">
    <img
      src="/bild.jpg"
      alt="">
    <span>KI im Webdesign</span>
  </a>

  <figcaption>
    Bild: KI-generiert.
  </figcaption>
</figure>

Hier haben die einzelnen Elemente klar getrennte Aufgaben:

• Der leere Alt-Text: Das Bild selbst ist dekorativ und wird vom Screenreader nicht als Bildinhalt angesagt.
• KI im Webdesign: Der sichtbare Linktext beschreibt das Linkziel.
• Bild: KI-generiert.: Die relevante Information über die Herkunft des Bildes bleibt als zugänglicher Text erhalten.

Best-Practice-Beispiel: informatives Bild

<figure>
  <a href="/artikel">
    <img
      src="/bild.jpg"
      alt="Mann arbeitet an einem Laptop">
    <span>KI im Webdesign</span>
  </a>

  <figcaption>
    Bild: KI-generiert.
  </figcaption>
</figure>

Hier sind wieder drei unterschiedliche Informationen vorhanden:

• „Mann arbeitet an einem Laptop“ – Bildalternative
• „KI im Webdesign“ – Linkziel
• „Bild: KI-generiert.“ – Herkunft beziehungsweise Kennzeichnung

Die wichtigsten WCAG-Kriterien im Überblick

Fazit

Die Kennzeichnung KI-generierter Bilder zeigt deutlich, warum Alt-Text, Linktext und zusätzliche Bildinformationen nicht dasselbe sind. Ein Alt-Text ist kein allgemeiner Container für sämtliche Informationen, die ein sehender Nutzer aus einem Bild und seiner Umgebung erhält.

Stattdessen sollte man fragen:

• Was ist die Funktion des Bildes?
• Was ist das Linkziel?
• Welche zusätzliche Information muss über das Bild vermittelt werden?
• Welche dieser Informationen muss Bestandteil des zugänglichen Namens des Links sein?
• Welche Information soll unabhängig davon für Screenreader-Nutzer zugänglich sein?

Bei einem informativen Bild kann der Alt-Text beispielsweise den Bildinhalt beschreiben. Bei einem dekorativen Bild bleibt der Alt-Text leer. Das bedeutet jedoch nicht, dass eine relevante Kennzeichnung wie „Bild: KI-generiert.“ ebenfalls verschwinden darf.

Besonders bei verlinkten Bildern muss zusätzlich darauf geachtet werden, ob ein aria-label am Link vorhandene Informationen aus dem zugänglichen Namen verdrängt. Ein aria-label sollte daher nicht als einfache Ergänzung verstanden werden, sondern als bewusste Festlegung des zugänglichen Namens.

Die Herausforderung besteht darin, die KI-Kennzeichnung auch ohne visuelle Wahrnehmung verständlich zu machen und gleichzeitig Bildinformation und Linkzweck sauber voneinander zu trennen.

Die zentrale Best Practice lautet daher:

Das Bild beschreiben, wenn es informativ ist. Das Linkziel über den Linktext zugänglich machen. Die KI-Herkunft als eigenständige, verständliche und zugängliche Information kennzeichnen. Und aria-label nur dann einsetzen, wenn der damit festgelegte zugängliche Name tatsächlich dem gewünschten Linkzweck entspricht.