WebAccessVL: Violation-Aware VLM for Web Accessibility

Die Arbeit stellt WebAccessVL vor, ein visuell-linguistisches Modell, das durch eine überwachte Bild-zu-Programm-Synthese und eine verletzungsbasierte Verfeinerung automatisch HTML-Codes so anpasst, dass WCAG2-Verstöße behoben werden, während das ursprüngliche Design erhalten bleibt.

Das Wesentliche

Stellen Sie sich vor, das Internet ist eine riesige, lebhafte Stadt. Für die meisten Menschen ist diese Stadt leicht zu durchqueren: Die Türen sind weit offen, die Schilder sind gut lesbar und die Wege sind klar markiert. Aber für Menschen mit Sehbehinderungen, Farbenblindheit oder motorischen Einschränkungen ist diese Stadt oft ein Labyrinth aus verschlossenen Türen, unsichtbaren Treppen und verwirrenden Hinweisen.

Das ist das Problem, das die Forscher in diesem Papier mit WebAccessVL lösen wollen. Hier ist die Erklärung, wie sie das tun, ohne technisches Fachchinesisch:

1. Das Problem: Der "Blinde" Architekt

Bisher haben Computer versucht, Webseiten zu reparieren, indem sie nur den Code (die Baupläne) gelesen haben. Das ist wie wenn ein Architekt versucht, ein Haus zu reparieren, indem er nur die Liste der Materialien liest, aber das Haus selbst nie sieht.

• Das Problem: Ein Computer kann im Code sehen, dass eine Schriftart "rot" ist. Aber er weiß nicht, ob dieses Rot auf einem gelben Hintergrund gut lesbar ist oder ob es für einen farbenblinden Menschen wie ein unsichtbarer Fleck aussieht. Frühere KI-Modelle haben oft den Code so verändert, dass die Webseite zwar technisch korrekt, aber optisch völlig kaputt aussah (wie ein Haus, bei dem man alle Wände neu gestrichen hat, aber die Tür verschlossen wurde).

2. Die Lösung: Ein KI-Duo mit "Augen" und "Verstand"

Die Forscher haben ein neues System namens WebAccessVL entwickelt. Stellen Sie sich das wie ein Architektenteam vor, das aus zwei Personen besteht:

1. Der Code-Experte: Er kennt die Regeln (die WCAG-Richtlinien) und kann den HTML-Code lesen.
2. Der visuelle Beobachter: Er sieht das Bild der Webseite, genau so, wie ein normaler Nutzer sie sieht.

Das Besondere an diesem Team ist, dass sie nicht nur raten, sondern Feedback erhalten.

3. Der "Kritiker" im Raum (Violation-Awareness)

Stellen Sie sich vor, Sie schreiben einen Aufsatz. Ein einfacher KI-Assistent würde sagen: "Hier ist ein Satz, mach ihn besser." Aber was ist "besser"?
WebAccessVL nutzt einen Kritiker (einen automatischen Prüfer). Bevor die KI den Code ändert, sagt der Kritiker: "Hey, hier ist ein rotes Schild auf gelbem Grund – das ist für Farbenblinde unsichtbar!" oder "Hier fehlt eine Bildunterschrift, damit blinde Menschen wissen, was auf dem Bild zu sehen ist."

Die KI nimmt diese spezifische Kritik und passt den Code nur dort an. Sie ändert nicht das ganze Haus, sondern repariert nur das kaputte Fenster.

4. Der "Schleifen"-Effekt (Checker-in-the-Loop)

Manchmal passiert es, dass man beim Reparieren eines Problems ein neues schafft.

• Beispiel: Die KI macht den Hintergrund dunkler, damit der Text besser lesbar ist. Aber dabei wird der Text zu dunkel und ist wieder schwer zu lesen.
• Die Lösung: Das System läuft in einer Schleife. Es repariert die Seite, der Kritiker schaut sich das Ergebnis an und sagt: "Okay, das ist besser, aber jetzt ist der Text zu dunkel." Die KI repariert es ein zweites Mal. Dieser Prozess wiederholt sich, bis die Seite perfekt ist.

5. Das Ergebnis: Ein Haus, das für alle zugänglich ist

Die Forscher haben 1.500 Webseiten genommen, die voller "Fehler" waren (wie unsichtbare Türen oder unlesbare Schilder).

• Ohne ihre Hilfe: Diese Seiten hatten im Durchschnitt über 5 große Fehler.
• Mit WebAccessVL: Die Fehlerzahl sank auf weniger als 0,2 pro Seite. Das ist eine Verbesserung von 96 %!

Und das Wichtigste: Die Webseiten sahen danach genau so aus wie vorher. Die Farben waren nur leicht angepasst, die Bilder bekamen Beschreibungen, aber das Design und der "Vibe" der Seite blieben erhalten. Es ist, als würde man einem alten, schönen Haus neue, gut beleuchtete Treppen und klare Schilder hinzufügen, ohne den Charme des Hauses zu zerstören.

Warum ist das wichtig?

Gesetze in den USA und Europa verlangen, dass Webseiten für alle zugänglich sind. Aber die meisten Entwickler haben nicht die Zeit oder das Wissen, jede einzelne Regel zu prüfen.
WebAccessVL ist wie ein Super-Assistent, der automatisch sicherstellt, dass das Internet für jeden nutzbar ist – egal ob man blind ist, Farben nicht unterscheiden kann oder nur mit der Tastatur navigiert. Es macht das Web nicht nur "legal", sondern wirklich einladend für alle.

Zusammenfassend:
Statt den Code blind zu reparieren, schaut sich die KI die Webseite an, hört auf einen strengen Kritiker, der genau sagt, was fehlt, und poliert die Seite so lange nach, bis sie für jeden Menschen perfekt funktioniert – ohne dabei das ursprüngliche Design zu zerstören.

Technische Zusammenfassung

Hier ist eine detaillierte technische Zusammenfassung des Papers „WebAccessVL: Violation-Aware VLM for Web Accessibility" auf Deutsch:

1. Problemstellung

Das Ziel der Arbeit ist die Automatisierung der Verbesserung der Webzugänglichkeit (Accessibility) gemäß den Web Content Accessibility Guidelines 2 (WCAG 2).

• Hintergrund: Trotz gesetzlicher Anforderungen (z. B. ADA in den USA, EAA in der EU) weisen etwa 96 % der Webseiten WCAG-Verstöße auf. Entwickler fehlt oft das Wissen oder die Fähigkeit, diese zu beheben.
• Limitationen bestehender Ansätze: Bisherige Methoden nutzen oft reine Text-basierte Large Language Models (LLMs), die nur den HTML-Code analysieren. Diese ignorieren jedoch die visuelle Darstellung der Webseite. Viele Zugänglichkeitsprobleme (z. B. Kontrastverhältnisse, falsche Bildbeschriftungen) sind im gerenderten Bild offensichtlich, aber im Code schwer zu erkennen.
• Kernherausforderung: Ein Modell muss entwickelt werden, das HTML-Code so bearbeitet, dass WCAG-Verstöße behoben werden, dabei aber das ursprüngliche Design und die visuelle Integrität der Webseite strikt bewahrt werden.

2. Methodik

Die Autoren formulieren die Aufgabe als bildkonditionierte Programmsynthese (Image-Conditioned Program Synthesis).

A. Datensatz: WebAccessVL

Da keine öffentlichen Datensätze für diese spezifische Aufgabe existierten, erstellten die Autoren WebAccessVL:

• Umfang: 1.500 Webseiten-Paare (HTML-Code + Screenshot).
• Annotation: Ein Experte korrigierte manuell den HTML-Code jedes Eintrags, um WCAG 2.0-Standards zu erfüllen, während das visuelle Design erhalten blieb. Dieser Prozess dauerte ca. 7–10 Minuten pro Seite.
• Statistik: Der Datensatz enthält sowohl visuell basierte Verstöße (35,8 %, z. B. Textkontrast, fehlende Alt-Texte) als auch rein sprachbasierte Verstöße (64,2 %, z. B. fehlende lang-Attribute, ARIA-Rollen).

B. Modellarchitektur: Violation-Aware VLM

Das vorgeschlagene System ist ein Vision-Language Model (VLM), das auf einem vortrainierten autoregressiven Modell basiert und durch drei Hauptkomponenten erweitert wird:

1. Verstoß-konditioniertes Training (Violation-Conditioned):

   • Statt nur HTML und Bild als Eingabe zu nutzen, wird das Modell zusätzlich mit einem strukturierten Verstoßbericht konditioniert.
   • Dieser Bericht wird durch einen Accessibility-Checker (IBM Checker) generiert und listet spezifische Verstöße, betroffene Elemente und deren Positionen im Code auf.
   • Dies lenkt die Aufmerksamkeit des Modells gezielt auf die fehlerhaften Elemente, anstatt generische Änderungen vorzunehmen.

2. Negative Guidance Sampling (Classifier-Free Guidance):

   • Um die Wirkung der Verstoß-Konditionierung zu verstärken, wird eine Sampling-Strategie verwendet, die den Unterschied zwischen einem konditionierten Prompt (mit Verstoßbericht) und einem unbedingten Prompt (ohne Bericht, „HTML unverändert lassen") nutzt.
   • Dies verstärkt die Wahrscheinlichkeit von Tokens, die zu korrigiertem Code führen, und unterdrückt Tokens, die keine Änderungen bewirken.

3. Checker-in-the-Loop (Iterative Verfeinerung):

   • Ein iterativer Prozess am Inferenzzeitpunkt: Das Modell generiert HTML, ein Checker analysiert das Ergebnis und meldet verbleibende Verstöße zurück.
   • Das Modell erhält diese neuen Verstoßberichte als Eingabe für den nächsten Durchlauf, bis keine Verstöße mehr vorhanden sind oder Konvergenz erreicht ist.

3. Schlüsselbeiträge

1. Formulierung der Aufgabe: Definition von Web-Zugänglichkeit als bildkonditionierte Programmsynthese.
2. WebAccessVL-Datensatz: Erstellung und Veröffentlichung des ersten großen Datensatzes mit manuell korrigierten HTML-Screenshot-Paaren für dieses Szenario.
3. Neue Architektur: Entwicklung eines Verstoß-konditionierten VLMs, das visuelle Eingaben, Code und spezifische Fehlerberichte kombiniert.
4. Iterative Strategie: Einführung des „Checker-in-the-Loop"-Ansatzes, der die Genauigkeit durch Feedback-Schleifen signifikant steigert.

4. Ergebnisse

Die Evaluation erfolgte auf dem Testset von WebAccessVL (1.000 Webseiten) unter Vergleich mit 17 Baseline-Modellen (inkl. GPT-5, Claude 3.5, Llama 3, Qwen).

• Reduktion der Verstöße:

  • Rohdaten: Durchschnittlich 5,34 Verstöße pro Seite.
  • Bester Baseline (GPT-5): 1,68 Verstöße.
  • WebAccessVL (Gemma 3): 0,211 Verstöße pro Seite.
  • WebAccessVL (Llama 3.2 Vision): 0,244 Verstöße pro Seite.
  • Dies entspricht einer 96,0 %igen Reduktion gegenüber den Rohdaten und ist 87 % besser als GPT-5.

• Design-Erhaltung (Strukturelle Genauigkeit):

  • Während GPT-5 zwar viele Verstöße reduzierte, aber das Design oft komplett neu aufbaute (strukturelle Genauigkeit ~0,5 %), bewahrte das WebAccessVL-Modell die Struktur zu 90 % (gemessen an SSIM und Tree Edit Distance).
  • Das Modell führt gezielte Korrekturen durch (z. B. Hinzufügen von ARIA-Labels, Anpassung von Farben), ohne das Layout zu zerstören.

• VLM vs. LLM:

  • Visuell konditionierte Modelle (VLMs) übertrafen rein textbasierte LLMs deutlich, insbesondere bei visuellen Verstößen wie Kontrastproblemen.
  • Ohne Feinabstimmung (SFT) waren VLMs kaum besser als LLMs; erst durch SFT auf dem WebAccessVL-Datensatz zeigte sich der massive Vorteil der visuellen Eingabe.

• Perzeptuelle Studie:

  • Eine Studie mit 30 Teilnehmern zeigte, dass die von WebAccessVL bearbeiteten Webseiten von Nutzern signifikant häufiger als diejenige mit dem besten Design und Inhaltserhalt gewählt wurden im Vergleich zu Claude 3.5 und GPT-5.

5. Bedeutung und Ausblick

• Praktische Relevanz: Die Methode bietet einen skalierbaren Weg, um die massive Lücke bei der Webzugänglichkeit zu schließen, ohne dass Entwickler tiefes WCAG-Wissen benötigen.
• Technischer Fortschritt: Die Arbeit demonstriert, dass die Kombination aus visuellen Eingaben, Code-Generierung und explizitem Fehler-Feedback (Violation Conditioning) über reine Prompting-Ansätze hinausgeht.
• Open Source: Die Autoren versprechen die Veröffentlichung von Code und Datensatz, was die Nachforschung im Bereich „AI for Accessibility" vorantreiben wird.
• Zielgruppen: Die Lösung verbessert die Zugänglichkeit signifikant für blinde/sehschwache Nutzer (98,2 % der Verstöße behoben) und Nutzer mit motorischen Einschränkungen.

Zusammenfassend stellt WebAccessVL einen bedeutenden Schritt hin zur Automatisierung der Webzugänglichkeit dar, indem es die Stärken moderner Multimodal-Modelle nutzt, um nicht nur den Code, sondern auch die visuelle Realität einer Webseite zu verstehen und zu korrigieren.