Der Barrierefreiheitsbaum

Jeder Browser baut eine zweite Darstellung der Seite auf, die er anzeigt: einen Baum aus Rollen und Namen, gedacht für assistive Technologien. Ein Screenreader nutzt ihn, um „Schaltfläche, Anmelden“ zu sagen, statt Pixel zu beschreiben.

Diwall erfindet ihn nicht. Er ist schon da, in jeder Seite, die Sie je geöffnet haben, und er ist zufällig genau das, was ein Sprachmodell braucht.

Wie er aussieht

diwall-shot --url http://localhost:8765/demo_som_en.html --a11y --mode fast \
  --guide-version 1.3

- banner:
  - strong: Admin panel
  - navigation:
    - link "Dashboard":
      - /url: "#a"
    - link "Sites":
      - /url: "#b"
- main:
  - heading "Sign in" [level=2]
  - textbox "User name":
    - /placeholder: operator
  - textbox "Password":
    - /placeholder: ••••••••
  - combobox "Environment":
    - option "production" [selected]
    - option "staging"
  - button "Sign in"
  - button "Cancel"

Ausgeführt auf der Testseite, die mit Diwall ausgeliefert wird: 1 099 ms, ganz ohne Aufnahme. --mode fast liefert den Baum und sonst nichts – kein PNG, keine Bildanalyse.

Was er trägt und ein Bild nicht

Sehen Sie, was dieser Auszug ausdrücklich sagt und kein Screenshot sagen könnte:

Rollen. button, textbox, combobox, heading [level=2]. Nicht „ein Rechteck mit abgerundeten Ecken“ – sondern was das Element ist.

Ziele. link "Dashboard", gefolgt von /url: "#a". Wohin er führt, noch vor dem Klick.

Zustände. option "production" [selected]. Welche Auswahl gerade aktiv ist.

Struktur. Was zum Banner gehört, was zum Hauptinhalt, was worin verschachtelt ist. Ein Bild drückt all das auf eine einzige Ebene.

Ein Screenshot zeigt Ihnen, wie eine Seite aussieht. Der Baum sagt Ihnen, was sie ist.

Oft genügt er allein

Vier Seiten, drei Anfragen, das Stichwort samt Umfeld gefunden – und zu keinem Zeitpunkt ein Vision-Modell aufgerufen.

Das war eine echte Übung: ein Stichwort auf einer öffentlichen Website finden, ohne zu wissen, auf welcher Seite es steht. Nur --a11y. Das Wort tauchte in einem <strong> auf, und der Baum lieferte den Zusammenhang drumherum.

Für eine ganze Klasse von Aufgaben genügt der Baum sich selbst:

• nach einem Text oder einem Tag suchen
• über Links navigieren, da jedes href darin steht
• prüfen, ob ein Element vorhanden ist
• herausfinden, wie eine Seite gegliedert ist

Ein Vision-Modell wird erst nötig, wenn das Ziel keine zugängliche semantische Entsprechung hat – ein anklickbares Bild, eine Grafikfläche, ein Canvas. Das ist eine echte Kategorie, und sie ist kleiner, als man denkt.

Warum das über Diwall hinausgeht

Eine Seite mit einem gut gebauten Barrierefreiheitsbaum ist für einen Screenreader, eine Suchmaschine und einen Agenten lesbar – derselbe Baum dient allen dreien. Eine Seite, die ihre Schaltflächen mit <div> malt und so gestaltet, dass sie anklickbar aussehen, ist für alle drei zugleich undurchsichtig.

Der Baum ist keine Barrierefreiheitsfunktion, die nebenbei Maschinen hilft. Er ist die Struktur der Seite, ausdrücklich gemacht. Wer die Seite schreibt, entscheidet, ob es diese Struktur gibt.

Dieselbe Seite auf drei Arten sehen →

Kurz gesagt

• Der Browser baut diesen Baum für jede Seite auf, für assistive Technologien.
• Er trägt Rollen, Ziele, Zustände und Struktur – ein Bild trägt nichts davon.
• --a11y --mode fast liefert ihn ohne Screenshot, in etwa einer Sekunde.
• Greifen Sie nur dann zu einem Vision-Modell, wenn es nichts Semantisches zu lesen gibt.