Wenn du eine Website in Auftrag gibst, beurteilst du vor allem, was du siehst: Design, Texte, ob alles funktioniert. Ob sie wirklich für alle funktioniert, entscheidet sich aber an einer Stelle, die man auf dem Bildschirm gar nicht sieht – dem Accessibility Tree, der unsichtbaren Fassung deiner Seite, auf die blinde Menschen angewiesen sind. Und weil inzwischen auch KI-Systeme Webseiten zunehmend über genau diese Fassung lesen, entscheidet sie sogar mit, wie gut deine Seite in der KI-Suche (Fachbegriff: Generative Engine Optimization, kurz GEO) ankommt. Selbst bauen musst du das nicht – aber wenn du weißt, was der Accessibility Tree ist, kannst du bei deiner Agentur oder deinem Baukasten die richtigen Fragen stellen.
Was der Accessibility Tree ist
Jede Website besteht aus Code, und dein Browser macht daraus zwei Dinge parallel: die sichtbare Seite mit Farben, Bildern und Layout – und eine zweite, unsichtbare Fassung. Diese Fassung ist eine strukturierte Liste aller Elemente, die festhält, was jedes davon ist und tut. Das ist der Accessibility Tree.
Hilfsmittel wie ein Screenreader nutzen nicht die sichtbare Seite, sondern diese Liste. Für sie ist der Accessibility Tree die Website.
Was in dieser Liste steht
Zu jedem Element hält der Accessibility Tree drei Dinge fest:
- die Rolle – was es ist: Button, Überschrift, Link, Bild, Ankreuzfeld.
- den Namen – wie es heißt, also seine Beschriftung: „Suchen“, „Newsletter abonnieren“.
- den Zustand – wie es gerade ist: angekreuzt oder nicht, geöffnet oder geschlossen.
Aus diesen Angaben wird eine Art Bedienungsanleitung der Seite: Damit springt ein blinder Mensch per Screenreader von Überschrift zu Überschrift, findet Buttons und füllt Formulare aus – ohne die Seite je zu sehen.
Warum manche Seiten funktionieren und andere nicht
Wird eine Seite mit den richtigen Bausteinen gebaut, füllt der Browser diese Liste von allein korrekt: Ein echter Button steht als Button darin, eine echte Überschrift als Überschrift.
Problematisch wird es, wenn Elemente nur so aussehen wie das, was sie sein sollen. Ein paar Fälle, die in der Praxis oft vorkommen:
- Ein „Button“, der technisch nur ein gestyltes Kästchen ist, taucht in der Liste gar nicht als Button auf – der Screenreader findet ihn nicht.
- Ein Bild ohne Alternativtext steht ohne Namen da – es kommt als „Grafik“ an, ohne Inhalt.
- Eine Überschrift, die nur optisch größer gesetzt wurde, ist keine echte Überschrift – man kann nicht zu ihr springen.
- Ein Formularfeld ohne Beschriftung hat keinen Namen – unklar, was hineingehört.
Von außen sieht die Seite in all diesen Fällen fertig aus. In der unsichtbaren Liste klafft trotzdem eine Lücke – und genau dort bleibt jemand hängen, der die Seite darüber bedient.
Was das für dich bedeutet
Umsetzen musst du das nicht selbst. Aber wenn du weißt, was einen guten Accessibility Tree ausmacht, kannst du die richtigen Fragen stellen – deiner Agentur, oder dir selbst, wenn du mit einem Baukasten arbeitest. Der Kern passt in einen Satz: Elemente sollten das sein, was sie vorgeben zu sein. Ein Button ein echter Button, eine Überschrift eine echte Überschrift, jedes Bild mit sinnvollem Alternativtext, jedes Formularfeld beschriftet. Wer so baut, legt die unsichtbare Liste ganz von selbst richtig an.
Übrigens: Wenn du neugierig bist, kannst du dir den Accessibility Tree sogar selbst ansehen. In den Entwicklertools deines Browsers (meist mit der Taste F12) gibt es einen Bereich „Accessibility“ bzw. „Barrierefreiheit“, der genau diese Fassung anzeigt.
Auch Maschinen lesen mit
Damit sind wir wieder bei der KI vom Anfang. Lange war der Accessibility Tree vor allem für Screenreader da; inzwischen erschließen sich auch KI-Systeme Webseiten zunehmend über genau diese Fassung. Dieselbe saubere Struktur, die deine Seite für Menschen zugänglich macht, macht sie damit auch für Maschinen verständlich – ein Grund mehr, sie ernst zu nehmen.
Kurz gesagt
Der Accessibility Tree entscheidet mit darüber, ob deine Seite für Menschen zugänglich und für Maschinen lesbar ist – und das an Stellen, die man im fertigen Design gar nicht sieht. Er ist nur eins von vielen solchen Details. Als Auftraggeberin musst du sie nicht alle selbst prüfen. Aber du kannst von Anfang an klare Anforderungen stellen – und wissen, wie du eine Agentur auf die Probe stellst.
Genau dafür habe ich eine Checkliste für barrierefreie Website-Aufträge zusammengestellt: die Anforderungen, die in deinen Auftrag gehören – WCAG und Co., verständlich formuliert – und woran du erkennst, ob eine Agentur das Thema wirklich beherrscht. Hier kommst du zur Checkliste.
