Warum AI Agents von Accessibility profitieren

Menschen und AI Agents müssen eine Webseite verstehen, um Aktionen durchführen zu können. Während Menschen die Informationen auf einer Webseite meist visuell wahrnehmen, ist das für AI Agents etwas anders. Sie können zwar Screenshots durch Vision-Modelle auswerten, aber diese Methode ist teuer, langsamer und verbraucht mehr Tokens. Agents nutzen daher ähnlich wie Screenreader auch den Accessibility Tree.

Was ist der Accessibility Tree?

Der Accessibility Tree ist eine vom Browser berechnete Baumstruktur Deiner Seite – abgeleitet aus DOM, CSS und ARIA-Attributen. Er filtert die visuelle Darstellung der Webseite raus und gibt Informationen über Struktur, Namen, Rollen und Zustände von Webelementen wieder. Ein paar Beispiele:

Möchtest Du uns Wingmenschen eine Nachricht über unser Kontaktformular schicken, klickst Du am Ende auf den Button “Anfrage jetzt abschicken”.

Im DOM sieht das in etwa so aus:

<button type="submit" id="submit-button">Anfrage jetzt abschicken</button>

Im Accessibility Tree vereinfacht das zu:

button: “Anfrage jetzt abschicken”

Möchtest Du lieber direkt mit mir sprechen und über den Kalenderlink auf meiner Teamseite mit mir einen Termin ausmachen, sieht das im DOM in etwa so aus:

<a href="https://calendar.app.google/sbtXvE3ac1nFn4FD8">15/30-Minuten-Termin mit Sandra reservieren</a>

Der Accessibility Tree macht daraus:

link: “15/30-Minuten-Termin mit Sandra reservieren”

Vorteile für Screenreader und AI Agents

Screenreader nutzen das um eine vereinfachte, rein Text-basierte Version einer Webseite zu erhalten. Der Accessibility Tree filtert das visuelle Design heraus und liefert dem Screenreader nur die Struktur, Texte und Bedienelemente. Dadurch weiß das Programm genau, was es dem Nutzer vorlesen muss und wie dieser per Tastatur durch die Seite navigieren kann.

Können AI Agents den Accessibility Tree nutzen, sind sie nicht auf Pixel-Koordinaten angewiesen. Das macht sie auch unempfindlicher gegenüber CLS-Problemen.

AI Agents verbrauchen auch weniger Tokens und sind schneller, wenn sie sich schnell am Accessibility Tree langhangeln können und nicht Screenshots auswerten müssen.

Semantisches HTML als Basis

Ein ordentlicher Accessibility Tree steht und fällt mit semantischen HTML. Nutze also statt der Container <div> und <span> lieber <nav>, <main>, <header>, <h1>, <a>, <button> etc.

Falls Du mehr zum Thema wissen möchtest, kontaktiere gern uns Wingmenschen oder mich direkt. Die Links dazu kennst Du jetzt ja ;)

Oder Tor 3: Falls Du gern mit mir einen ganzen Tag zum Thema AI Agent Readiness durch Accessibility verbringen möchtest, dann komm doch am 5. April 2027 zu meinem Workshop auf der SMX München. Das ist zwar noch ein bisschen hin, aber Du weißt ja, der frühe Vogel.