Farbe, Symbole, ARIA: Was KI-Assistenten auf Webseiten erkennen – und was nicht

1. November 2026

Lesedauer: ca. 13 Minuten

Das Experiment

Ich habe neun technische Varianten derselben Terminübersicht mit ChatGPT, Gemini und Claude getestet. Dabei stellte ich folgende Frage: „Welche Termine auf [Adresse der Testseite] sind bereits ausgebucht?“ Getestet wurden:

ChatGPT, kostenlose Version, angemeldet
Gemini „Automatic“, kostenlose Version, angemeldet
Claude Sonnet, kostenlose Version
Claude Opus, bezahlte Version, Browser-Erweiterung „Claude in Chrome“, Stufe „Mittel“

Stand: Ende Oktober 2026. Sprachmodelle ändern sich so schnell, dass das, was ich heute schreibe, sehr wahrscheinlich in Zukunft nicht mehr stimmt. Trotzdem wollte ich es selbst testen, statt mich auf Aussagen wie „die KI liest eh den Accessibility Tree“ zu verlassen. Dieser Test ist ein explorativer Praxisvergleich zu einem konkreten Zeitpunkt – keine repräsentative Studie und keine allgemeingültige Aussage über alle KI-Modelle.

Das Ergebnis: Nur drei Varianten wurden von allen vier Assistenten korrekt gelesen. Bis auf eine Variante waren alle barrierefrei. Am zuverlässigsten waren sichtbarer Text direkt in der Tabellenzelle und Bilder mit korrektem Alternativtext. SVG-Elemente wurden von ChatGPT und Gemini nicht gelesen, dadurch funktionierten auch die ARIA-Attribute nicht. Und irreführende Dateinamen haben Gemini zu falschen Antworten verleitet.

Eine Erkenntnis: Was für Screenreader-Nutzende funktioniert, ist nicht automatisch für KI-Assistenten lesbar. Sichtbarer Text oder ein Bild mit korrektem Alternativtext sind dagegen die robusteste Grundlage – für Menschen, assistive Technologien und KI.

Ergebnisse: Nur 3 von 9 Varianten wurden von allen Assistenten korrekt gelesen

Welche Termine sind ausgebucht? Die Antworten von vier KI-Assistenten auf neun Varianten derselben Terminübersicht, sortiert nach der Zahl richtiger Antworten
Variante	Barrierefrei?	ChatGPT kostenlos	Gemini kostenlos	Claude Sonnet kostenlos	Claude Opus bezahlt, im Browser
2 · Sichtbarer Text	ja	richtig	richtig	richtig	richtig 6 s
4 · `<img>` + `alt`	ja	richtig	richtig	richtig	richtig per Screenshot, 24 s
8 · `<img>` + `aria-labelledby` neutraler Dateiname	teilweise Name vorhanden, aber `alt` fehlt	richtig	richtig	richtig	richtig per Screenshot, 29 s
3 · Versteckter Text	teilweise für Screenreader ja, visuell nicht	falsch	richtig	richtig	richtig 12 s
5 · SVG + `<title>`	nicht verlässlich Unterstützung uneinheitlich	falsch	falsch	richtig	richtig per Quellcode, 20 s
7 · SVG + `<title>` + `aria-labelledby`	ja	falsch	falsch	richtig	richtig per Screenshot, 27 s
9 · wie 8 irreführende Dateinamen	teilweise wie 8	richtig	falsch las die Dateinamen	unsicher bemerkte den Widerspruch	richtig per Screenshot, 18 s
1 · Nur Farbe	nein	falsch	falsch	unsicher	richtig per Screenshot, 33 s
6 · SVG + `aria-label`	ja	falsch	falsch	unsicher	richtig per Screenshot, 24 s

Richtig = beide ausgebuchten Termine vollständig und mit korrektem Datum genannt. Falsch = keine korrekte Erkennung, falsche Termine oder erfundene Daten. Unsicher = das Modell erklärt selbst, den Status nicht zuverlässig erkennen zu können. ChatGPT sagte bei einigen falschen Antworten erst nach einigen Sätzen, dass es den Status nicht sicher erkennen kann.

Drei Varianten haben alle vier Assistenten richtig erkannt: sichtbaren Text in der Tabellenzelle (Variante 2), ein <img> mit alt (Variante 4) und ein <img>, das seinen Namen über aria-labelledby aus der Legende holt (Variante 8). Ohne Zusatzarbeit ging es aber nur mit sichtbarem Text: Die bezahlte KI brauchte dafür nur 6 Sekunden und keinen Screenshot. Bei den beiden Bild-Varianten brauchte sie 24 und 29 Sekunden und machte jeweils ein Bildschirmfoto.

Wichtig: Die Ergebnisse zeigen, ob eine Information insgesamt auffindbar war – nicht immer, welcher technische Mechanismus dafür verantwortlich war. Gerade bei Varianten mit Legende und Dateinamen können mehrere Hinweise gleichzeitig eine Rolle gespielt haben.

Direkt zur Beschreibung der Ergebnisse springen

Details zu meiner Demo-Umsetzung

Stell dir vor, auf deiner Website stehen Termine online. Neben jedem Termin siehst du, ob noch Plätze frei sind, ob nur noch wenige übrig sind – oder ob der Termin bereits ausgebucht ist.

Das wird oft so umgesetzt: Ein grüner Punkt bedeutet „freie Plätze“, ein gelber Punkt „nur noch wenige Plätze“, ein roter Punkt „ausgebucht“. Die Bedeutung der Farben steht in einer Legende über oder unter der Tabelle.

Das Problem dabei: Menschen mit Rot-Grün-Sehschwäche können diese Umsetzung nicht zuverlässig lesen. Sie sehen möglicherweise Punkte, aber nicht, welcher davon „frei“, „wenige Plätze“ oder „ausgebucht“ bedeutet.

Rot-Grün-Sehschwäche betrifft einen großen Teil der Bevölkerung. Und auch für Menschen, die die Seite unter Stress, auf einem kleinen Bildschirm oder mit eingeschränkter Aufmerksamkeit lesen, ist eine Vermittlung von Information nur durch Farbe unnötig anstrengend.

Einfachste Lösung: Text direkt in der Tabelle sichtbar machen

<td>
  <span class="punkt punkt--rot" aria-hidden="true"></span>
  Ausgebucht
</td>

Der farbige Punkt ist nun nur noch eine visuelle Unterstützung. Die Information selbst steht als Text daneben.

Das hat viele Vorteile:

Menschen mit Farbsehschwäche erkennen den Status sofort.
Screenreader lesen die Information vor.
Die Bedeutung muss nicht erst über eine Legende „entschlüsselt“ werden.
Die kognitive Belastung sinkt, weil niemand Farben und Bedeutungen im Kopf zuordnen muss.

Was, wenn kein Platz für Text ist?

Manchmal passt ein Text aus Design-Gründen nicht in jede Tabellenzelle – etwa bei sehr schmalen Layouts oder wenn der Status mehrmals pro Zeile vorkommt. Dann sind unterscheidbare Symbole eine bessere Lösung als Farbe allein.

Statt eines farbigen Punkts kannst du zum Beispiel ein Hakerl, ein Warndreieck und ein Kreuz verwenden. Wenn kein Text dabei steht, brauchen diese Symbole eine Textalternative – bei einem Bild über alt (Externer Link, öffnet sich in einem neuen Fenster).

<td>
  <img src="/img/icon-ausgebucht.svg"
       width="18" height="18"
       alt="Ausgebucht">
</td>

Sichtbarer Text und ein Bild mit korrektem Alternativtext sind beide robust: Alle vier Assistenten haben beide Varianten richtig erkannt. Am angenehmsten zu lesen ist die Kombination aus Symbol und sichtbarem Text. Das Symbol macht den Status auf einen Blick erkennbar, der Text macht ihn eindeutig.

Die neun Varianten

Für den Test habe ich eine Terminübersicht mit sieben Veranstaltungen erstellt. Zwei Termine waren ausgebucht:

„Barrierefreie PDFs“ am 11. Februar 2027
„Workshop: Screenreader für Einsteiger*innen“ am 19. März 2027

Alle Varianten enthielten dieselben Termine und dieselbe Information. Unterschiedlich war ausschließlich die technische Umsetzung des Status.

Details zum Ausklappen: Du siehst einen Ausschnitt der Seite und den Code der Tabellenzelle mit dem ausgebuchten Termin. Die Formen in den SVG-Symbolen habe ich mit „…“ abgekürzt.

Variante 1 · Nur Farbe

Ein farbiger Punkt mit CSS ohne Text; die Bedeutung steht nur in einer getrennten Legende.

<td>
  <span class="dot dot--rot"></span>
</td>

Barrierefreiheit: Nein. Farbe ist hier der einzige Informationsträger. Das verstößt gegen das WCAG-Kriterium 1.4.1 „Benutzung von Farbe“ (Externer Link, öffnet sich in einem neuen Fenster): Farbe darf nicht das einzige visuelle Mittel sein, um Informationen zu vermitteln.

Variante 2 · Sichtbarer Text in der Zelle

Der Punkt ist dekorativ, der Status steht als Text daneben. Eine eigene Legende braucht es nicht mehr.

<td>
  <span class="status">
    <span class="dot dot--rot" aria-hidden="true"></span>
    Ausgebucht
  </span>
</td>

Barrierefreiheit: Ja. Die Information ist sichtbar, textlich verfügbar und nicht von Farbe abhängig.

Variante 3 · Symbol plus versteckter Text

Statt Punkten gibt es ab hier Symbole mit eigener Form – Häkchen, Warndreieck, Kreuz. Das Symbol ist für assistive Technologien ausgeblendet, der Status steht als visuell versteckter Text daneben.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" aria-hidden="true">
    …
  </svg>
  <span class="visually-hidden">Ausgebucht</span>
</td>

Barrierefreiheit: Teilweise. Für Screenreader-Nutzende ist der Status da. Für sehende Menschen, die Farbe oder Form nicht zuverlässig unterscheiden können, ist der Status jedoch nicht sichtbar.

Variante 4 · Bild mit Alternativtext

Das Symbol ist eine Bilddatei mit alt-Attribut.

<td>
  <img class="status-img" src="/img/status-rot.svg"
       width="18" height="18" alt="Ausgebucht">
</td>

Barrierefreiheit: Ja. Für bedeutungstragende Bilder ist alt der native HTML-Mechanismus für eine Textalternative.

Variante 5 · SVG mit title

Das SVG (Externer Link, öffnet sich in einem neuen Fenster) erhält einen <title> als einzige Beschriftung.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img">
    <title>Ausgebucht</title>
    …
  </svg>
</td>

Barrierefreiheit: Nicht verlässlich. Die Unterstützung von <title> in SVG (Externer Link, öffnet sich in einem neuen Fenster) ist je nach Browser und assistiver Technologie unterschiedlich. Robuster ist eine Verknüpfung über aria-labelledby.

Variante 6 · SVG mit aria-label

Das SVG bekommt seinen Namen direkt über aria-label (Externer Link, öffnet sich in einem neuen Fenster).

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img" aria-label="Ausgebucht">
    …
  </svg>
</td>

Barrierefreiheit: Ja. aria-label kann einem Element mit role="img" (Externer Link, öffnet sich in einem neuen Fenster) einen zugänglichen Namen (Externer Link, öffnet sich in einem neuen Fenster) geben.

Variante 7 · SVG mit title und aria-labelledby

Das SVG enthält einen <title>, auf den aria-labelledby verweist.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img" aria-labelledby="status-titel-2">
    <title id="status-titel-2">Ausgebucht</title>
    …
  </svg>
</td>

Barrierefreiheit: Ja. Diese Kombination ist die robustere SVG-Variante, weil aria-labelledby den <title> ausdrücklich als zugänglichen Namen heranzieht.

Variante 8 · Bild mit aria-labelledby, neutraler Dateiname

Das Symbol ist ein <img> ohne alt-Attribut. Seinen Namen bekommt es über aria-labelledby aus der Legende. Die Dateien heißen neutral icon-01.svg bis icon-03.svg.

In der Tabellenzelle:

<td>
  <img class="status-img" src="/img/icon-01.svg" width="18" height="18"
       aria-labelledby="legende-rot">
</td>

In der Legende:

<img class="status-img" src="/img/icon-01.svg" width="18" height="18"
     alt=""> <span id="legende-rot">Ausgebucht</span>

Barrierefreiheit: Teilweise. Der zugängliche Name „Ausgebucht“ kommt aus der Legende, aber das alt-Attribut fehlt. Für die Praxis würde ich diese Variante nicht empfehlen: alt="Ausgebucht" ist bei bedeutungstragenden Bildern der native und robusteste Weg.

Variante 9 · Wie 8, aber mit irreführenden Dateinamen

Aufbau und Aussehen wie Variante 8, nur die Dateinamen stimmen nicht: Das rote Kreuz heißt plaetze-frei.svg, das grüne Häkchen ausgebucht.svg. In der Legende stehen dieselben Dateien neben den richtigen Wörtern.

In der Tabellenzelle:

<td>
  <img class="status-img" src="/img/plaetze-frei.svg" width="18" height="18"
       aria-labelledby="legende-rot">
</td>

In der Legende:

<img class="status-img" src="/img/plaetze-frei.svg" width="18" height="18"
     alt=""> <span id="legende-rot">Ausgebucht</span>

Barrierefreiheit: Teilweise, wie bei Variante 8. Für Screenreader ändert sich nichts – Dateinamen werden nicht vorgelesen, der Name kommt aus aria-labelledby. Die Variante prüft, ob eine KI dem Dateinamen mehr glaubt als der Legende.

Screenshots des Experiments

Wähle ein Bild aus, um es zu vergrößern. Mit Esc oder einem Klick daneben schließt du die Ansicht wieder.

ChatGPT

Gemini

Claude Sonnet

Claude Opus

Beschreibung der Ergebnisse

KI-Assistenten werden häufig als neue assistive Technologien beschrieben: Sie können Informationen zusammenfassen, Webseiten auslesen und Aufgaben im Browser übernehmen. Für manche Menschen – etwa bei Sehbehinderung, kognitiven Einschränkungen oder zeitlicher Belastung – kann das den Zugang zu Informationen deutlich erleichtern.

Aber: Ein KI-Assistent ist nicht automatisch eine assistive Technologie im Sinne der Barrierefreiheits-Standards. Und „barrierefrei“ heißt nicht automatisch „zuverlässig von jeder KI lesbar“.

ARIA und SVG-Icons: für Screenreader da, für ChatGPT und Gemini unsichtbar

Laut web.dev (Externer Link, öffnet sich in einem neuen Fenster) können KI-Agenten eine Webseite grundsätzlich auf mehreren Wegen verarbeiten: als Screenshot, als HTML- bzw. DOM-Repräsentation und über den Accessibility Tree. Der Accessibility Tree enthält unter anderem Rollen, Namen und Zustände von Bedienelementen; er ist damit für assistive Technologien und für KI-Agenten relevant.

Welche dieser Informationen ein konkretes Modell tatsächlich verwendet, hängt aber vom Produkt, vom Modus, vom Zugriffsweg und vom Seitenaufbau ab.

Variante 6 ist für Screenreader grundsätzlich sinnvoll: Das SVG hat über aria-label einen zugänglichen Namen. Aber keiner der drei kostenlosen KI-Assistenten hat die Information gefunden. ChatGPT und Gemini haben den Status in keinem der SVG-Fälle erkannt – weder über role="img", aria-label, aria-labelledby noch <title>.

Claude Sonnet hat immerhin <title> gefunden (Variante 5 und 7). Das ist nachvollziehbar: <title> ist tatsächlicher Text im DOM. aria-label und aria-labelledby sind dagegen Attribute, die vor allem im Accessibility Tree wirksam werden. Verarbeitet ein Assistent die Seite als Text, HTML oder Screenshot, kann diese Information fehlen.

Bei einem <img> (Variante 8) hat aria-labelledby dagegen bei allen funktioniert. Möglicherweise hat auch geholfen, dass dieselbe Bilddatei in der Legende direkt neben dem Wort steht.

Dateinamen können KI-Antworten verfälschen

Variante 9 sieht genauso aus wie Variante 8, nur die Dateinamen lügen: Das rote Kreuz heißt plaetze-frei.svg, das grüne Häkchen ausgebucht.svg. Gemini ist darauf hereingefallen und hat genau die drei Termine mit freien Plätzen als ausgebucht genannt. Claude Sonnet hat den Widerspruch zwischen Legende und Dateinamen bemerkt, beide Lesarten aufgelistet und sich nicht festgelegt. ChatGPT und Claude Opus lagen richtig – Opus hat dafür einen Screenshot gemacht.

Für Screenreader sind Dateinamen im Normalfall unsichtbar, eine KI wertet auch diesen Text aus. Sprechende Dateinamen sind also gut – aber nur, wenn sie stimmen.

Ehrliche Unsicherheit ist besser als eine falsche Antwort

ChatGPT und Gemini haben in mehreren Fällen selbstsicher behauptet, es gebe keine ausgebuchten Termine. Erst im weiteren Verlauf der Antwort geht manchmal hervor, dass es nicht sicher ist. Gemini behauptete teilweise, alle Veranstaltungen hätten freie Plätze.

Claude Sonnet hat in den Fällen, in denen es den Status nicht lesen konnte, erklärt, dass es keine zuverlässige Aussage treffen könne. Das ist der deutlich bessere Fehlermodus: Eine ehrliche Unsicherheit ist besser als eine erfundene Antwort.

Bei manchen Antworten stimmten zwar Monat und Terminname, nicht aber der Tag. Aus dem 19. Jänner wurde zum Beispiel der 2. Jänner, aus dem 11. Februar der 4. Februar. Wer solche Antworten ungeprüft übernimmt, kann am falschen Tag vor Ort sein.

Bezahlte vs. Gratis-KI

Claude Opus lief als Browser-Erweiterung: Es kann die gerenderte Seite sehen, Skripte ausführen und Screenshots erstellen – ein wesentlicher Unterschied zu einem reinen Chat-Zugriff.

Claude Opus hat alle neun Varianten richtig erkannt. Dafür hat es im Quelltext nachgesehen, Skripte auf der Seite ausgeführt und bei sechs Varianten ein Bildschirmfoto gemacht – mit zwischen 6 und 33 Sekunden pro Frage. Die bezahlte KI griff also auf mehr Informationsquellen zurück und lieferte in allen Fällen das korrekte Ergebnis. Sie braucht dafür aber mehr Zeit und mehr Rechenleistung.

Damit sind wir bei der Nachhaltigkeit: Eine gute KI kommt auch bei Kraut-und-Rüben-Code mit Screenshots und Skripten zum Ergebnis. Notwendig ist dieser Aufwand aber nicht – eine stabile, standardkonforme Umsetzung spart Fehler, Zeit und Energie.

Notiz am Rande: `robots.txt` wurde nicht von allen respektiert

Die Testseite enthielt zunächst:

User-agent: *
Disallow: /

Claude Sonnet war der einzige getestete Assistent, der die Sperre respektiert hat. Es schlug vor, den Inhalt einzufügen oder einen Screenshot zu senden, statt die Seite eigenmächtig auszulesen.

ChatGPT und Gemini haben trotz Sperre geantwortet. Für die eigentliche Testreihe habe ich die Sperre anschließend aufgehoben.

Das ist mehr als ein technisches Detail: Es betrifft Transparenz, Autonomie und die Frage, welche Zugriffe Website-Betreibende tatsächlich kontrollieren können.

Empfehlungen für bessere KI-Antworten und Barrierefreiheit

Wichtige Informationen als sichtbaren Text oder als Bild mit Alternativtext Farbe darf ergänzen, aber nicht die Information allein tragen. Das verlangt das WCAG-Kriterium 1.4.1 „Benutzung von Farbe“. Symbole ohne sichtbaren Text brauchen einen Alternativtext.
Den Status direkt in der Tabellenzelle anzeigen Nicht nur in einer getrennten Legende.
Wenn nur Symbole verwendet werden: <img> statt Inline-SVG Für bedeutungstragende Bilder ist <img> mit Alternativtext robuster als ein Inline-SVG, dessen Bedeutung nur über ARIA oder <title> vermittelt wird.
Dateinamen der Bilder sind wichtig! Eine KI nimmt sich alle Infos, die sie kriegen kann, und wenn ein irreführender Dateiname ausgebucht.svg für freie Termine verwendet wird, dann interpretiert das die KI eventuell falsch (Gemini!).
Kontakt direkt auf der Seite anbieten Die KI liest die ganze Seite und gibt weiter, was dort steht: In meinem Test hat sie immer wieder auf die Warteliste und das Anmeldeformular verwiesen. Für Wichtiges gehört eine Kontaktmöglichkeit deshalb direkt auf die Seite.

Google hat ähnliche Empfehlungen, um die KI-Sichtbarkeit zu erhöhen

In „Build agent-friendly websites“ empfiehlt web.dev unter anderem semantisches HTML, echte <button>- und <a>-Elemente, verknüpfte Beschriftungen und ein stabiles Layout. Das deckt sich mit meinen Ergebnissen.

Everything we suggest to make a site “agent-ready” also makes sites better for humans.

Build agent-friendly websites, web.dev

Mein Fazit

Mich hat überrascht, dass SVG-Elemente von ChatGPT und Gemini gar nicht erkannt wurden. Eine mögliche, aber unbelegte Erklärung hat mir eine KI selbst geliefert: „SVGs werden dabei von den Scraping-Algorithmen fast immer komplett herausgefiltert, weil sie meistens nur dekorativen Code (Pfade, Kreise, Quadrate) enthalten.“ Ich bin ein echter Fan von Inline-SVGs, aber ich werde mir in Zukunft noch besser überlegen, wie ich wichtige Textinformationen zum SVG bereitstelle. Wenn Text innerhalb des SVG-Elements von manchen KI-Assistenten nicht erkannt wird, dann muss der Text außerhalb des SVGs zur Verfügung stehen.

Sichtbarer Text oder korrekter Alternativtext. Semantisches HTML. Klare Tabellen. Redundante Informationen.

Das macht Websites nicht nur barrierefreier, sondern auch verlässlicher für KI-Assistenten. Wie du einer KI schon beim Umsetzen deiner Website Barrierefreiheit beibringst, steht in meinem Artikel Wie du deine KI-generierte Website barrierefrei und gut für SEO machst.

Quellen (auf Englisch):

Wie ist dieser Artikel entstanden? Artikelkonzept und Entwurf von mir, Überarbeitung von Perplexity, Überarbeitung von mir.