Wie ein Modell eine Seite sieht

Ein Sprachmodell sieht keine Webseite. Es erhält eine Beschreibung davon, und die Form dieser Beschreibung entscheidet darüber, was es tun kann und was nicht.

Die Seite unten ist die Startseite dieser Website. Nichts wurde für die Vorführung inszeniert: Die drei Ansichten stammen aus einem einzigen Befehl, ausgeführt auf einer Seite, die Sie sofort selbst öffnen können.

Eins – wie Sie sie sehen

Zwei – wie sie nummeriert wird

Die Nummern kommen im JSON neben dem Bild zurück:

{"elements_som": [
  {"id": 1, "tag": "A", "texte": "Diwall"},
  {"id": 2, "tag": "SUMMARY", "texte": "Deutsch"},
  {"id": 7, "tag": "A", "texte": "Wahrnehmung"}
]}

Auf Wahrnehmung zu klicken heißt also {"type": "cliquer_som", "id": 7}. Kein Selektor, keine Beschreibung, keine Unklarheit darüber, welches Element gemeint war. Der ganze Mechanismus liegt darin.

Drei – wie sie sich liest

Dieselbe Seite noch einmal, als Text – der Barrierefreiheitsbaum, den der Browser selbst aufbaut und den ein Screenreader verwendet:

- link "Zum Inhalt springen":
  - /url: "#contenu"
- banner:
  - heading "Diwall" [level=1]:
    - link "Diwall":
      - /url: /de/
  - group: Deutsch
  - button "Zwischen hellem und dunklem Design wechseln"
  - group: Herunterladen 1.24.4 ▾
- navigation "Diwall":
  - link "Anleitungen":
    - /url: /de/anleitungen/
  - link "Rezepte":
    - /url: /de/rezepte/
  - link "Wahrnehmung":
    - /url: /de/wahrnehmung/
  - link "Anwendungsfälle":
    - /url: /de/anwendungsfaelle/
  - link "Architektur":
    - /url: /de/architektur/
  - link "Journal":
    - /url: /de/journal/
  - link "Agenten":
    - /url: /de/agents/
  - link "Das Projekt":
    - /url: /de/projekt/
- main:
  - paragraph: Sie beschreiben Ihrem Modell den Bildschirm. Es antwortet mit…

Diese Ansicht kostet fast keine Tokens und trägt die Struktur, die ein Bild nicht tragen kann: was eine Überschrift ist, was eine Navigation ist, wohin jeder Link führt. Sie ist auch die Ansicht, die offenlegt, was ein Bild verbirgt.

Worin die drei Ansichten sich widersprechen

Betrachten Sie das Sprachmenü. Auf der Aufnahme ist es eine Schaltfläche. In der nummerierten Ansicht ist es Element 2. In der Textansicht ist es group: Deutsch – und die vier Sprachen darin fehlen in allen dreien.

Sie stehen sehr wohl im HTML. Sie sind nur geschlossen: Das Menü ist ein natives <details>-Element, und ein Browser stellt nicht dar, was nicht geöffnet ist. Ein Mensch klickt und sieht sie. Ein Agent muss ebenfalls erst klicken und dann erneut hinsehen.

Das ist kein Makel, den man verstecken müsste, sondern die ehrliche Antwort auf die Frage dieser Seite. Was ein Modell wahrnimmt, ist das Dargestellte, nicht das, was in der Datei steht. Wer die Seite schreibt, entscheidet, was von beidem ein Agent bekommt.

Die erste Fassung dieser Seite hat es auf die harte Tour bewiesen. Das Menü war geschlossen, blieb aber messbar: Diwall nummerierte daher vier Elemente gänzlich ohne Text – {"id": 10, "texte": ""}, viermal. Für einen Agenten unbrauchbar, für einen Menschen unsichtbar, und nur bemerkt, weil wir das Werkzeug auf unsere eigene Seite gerichtet haben. Eine Zeile CSS hat es behoben, und die Aufnahme oben ist die danach.

Machen Sie es nach

diwall-shot --url https://diwall.davalan.fr/de/ --som --a11y --guide-version 1.3

Ein einziger Befehl liefert alle drei: die Aufnahme, die nummerierte Ebene und den Barrierefreiheitsbaum. Die Bilder dieser Seite sind seine Ausgabe, ohne Retusche – die gewöhnliche Aufnahme ist auf denselben Ausschnitt zugeschnitten wie die nummerierte, die das sichtbare Fenster erfasst und nicht die ganze Seite.