WebAccessVL: Violation-Aware VLM for Web Accessibility

Each language version is independently generated for its own context, not a direct translation.

Stel je voor dat je een prachtige, kleurrijke tuin hebt ontworpen. Het ziet er geweldig uit, maar voor iemand die in een rolstoel zit, is het pad te smal, en voor iemand die slecht ziet, zijn de bloemen te licht van kleur tegen de achtergrond. Je wilt dat iedereen de tuin kan bezoeken, maar je wilt de tuin ook niet volledig slopen en opnieuw bouwen; je wilt hem gewoon toegankelijk maken.

Dit is precies het probleem dat de onderzoekers van WebAccessVL hebben opgelost. Ze hebben een slimme kunstmatige intelligentie (een "AI") gebouwd die websites kan repareren, zodat iedereen ze kan gebruiken, zonder dat het er anders uitziet.

Hier is hoe het werkt, vertaald in alledaags taal:

1. Het Probleem: De "Blinde" Architect

Vroeger probeerden computers websites te verbeteren door alleen naar de code te kijken (de instructies voor de computer). Dit is alsof je een architect vraagt om een huis toegankelijk te maken, maar je hem alleen de blauwdruk geeft en niet laat zien hoe het huis er echt uitziet.

Het resultaat: De AI zag misschien dat er een deur te smal was in de code, maar ze zag niet dat de muur eromheen te fel rood was, waardoor iemand met een slecht zicht de deur niet kon vinden.
De oplossing: De onderzoekers hebben een AI gemaakt die twee dingen tegelijk bekijkt: de code én een foto van hoe de website eruitziet. Het is alsof je de architect zowel de blauwdruk als een foto van het gebouw geeft.

2. De Oplossing: De "Kijk-en-Fix" Robot

Deze nieuwe AI, genaamd WebAccessVL, doet drie slimme dingen:

Het ziet de fouten: De AI krijgt een lijstje met fouten (bijvoorbeeld: "De tekst is te licht" of "Deze afbeelding heeft geen beschrijving"). Dit is als een inspecteur die een gebrekkige lijst in je hand geeft.
Het begrijpt de context: Omdat de AI ook naar de foto van de website kijkt, weet hij waar de fout zit en hoe hij die moet oplossen zonder de hele tuin te verwoesten. Hij weet bijvoorbeeld: "Ik moet de tekst donkerder maken, maar ik moet de kleur van de bloemen behouden."
Het controleert zichzelf: Na het maken van de reparaties, laat de AI de website opnieuw controleren. Als er nog een foutje overblijft (bijvoorbeeld: "Oh, door die donkere tekst is de knop nu weer te licht"), doet hij het nog een keer. Dit noemen ze "Checker-in-the-loop", wat je kunt vergelijken met een chef-kok die proeft, bijstoot, en weer proeft tot het gerecht perfect is.

3. Waarom is dit zo belangrijk?

Veel websites zijn vandaag de dag een doolhof voor mensen met een beperking.

Voor iemand die blind is, is een website zonder tekstbeschrijving bij afbeeldingen als een kamer zonder muren; je weet niet waar je bent.
Voor iemand met een slecht zicht is een lichtgrijze tekst op een witte achtergrond als een sneeuwwitte muur met een witte deur; je ziet het niet.

De onderzoekers hebben getest of hun AI beter werkt dan de beroemdste AI's ter wereld (zoals de nieuwste versies van GPT). Het resultaat?

De oude AI's maakten vaak de hele website kapot en bouwden hem opnieuw op (alsof je de hele tuin afbreekt om een pad te maken).
WebAccessVL repareerde de website met 96% minder fouten dan de originele versie, terwijl de website er voor de gewone bezoeker exact hetzelfde uitzag.

4. De Dataset: De "Leerboeken"

Om deze AI slim te maken, hadden ze duizenden voorbeelden nodig. Ze hebben 1.500 websites handmatig gerepareerd door mensen (experts in computerwetenschap) die urenlang aan elke site hebben gewerkt om de perfecte balans te vinden tussen toegankelijkheid en design. Dit is hun "trainingsboek" geworden.

Samenvatting in één zin

WebAccessVL is als een super-architect die een website niet alleen leest, maar ook bekijkt, en die met een delicate hand de foutjes repareert zodat iedereen de site kan gebruiken, zonder dat de oorspronkelijke schoonheid verloren gaat.

Het is een grote stap naar een internet waar niemand wordt uitgesloten, en waar technologie niet alleen slim is, maar ook inclusief.

Each language version is independently generated for its own context, not a direct translation.

Hier is een gedetailleerde technische samenvatting van het paper "WebAccessVL: Violation-Aware VLM for Web Accessibility", geschreven in het Nederlands.

Probleemstelling

Webtoegankelijkheid is cruciaal om ervoor te zorgen dat websites bruikbaar zijn voor iedereen, inclusief mensen met een handicap, zoals gedefinieerd door de WCAG 2.0-richtlijnen. Helaas tonen onderzoeken aan dat ongeveer 96% van de startpagina's WCAG-overschrijdingen bevat. Bestaande oplossingen, zoals regelgebaseerde systemen of tekstuele Large Language Models (LLMs), hebben beperkingen:

Tekstuele beperking: Veel toegankelijkheidsproblemen (zoals kleurcontrast of afbeelding-beschrijvingen) zijn visueel van aard en niet altijd af te leiden uit de HTML-code alleen.
Ontwerpbehoud: Bestaande methoden die HTML proberen te corrigeren, veranderen vaak de visuele lay-out of het ontwerp van de website drastisch, wat de gebruikerservaring negatief beïnvloedt.
Gebrek aan datasets: Er ontbrak een gespecialiseerd dataset om modellen te trainen om HTML specifiek aan te passen voor toegankelijkheid zonder het ontwerp te vernietigen.

Methodologie

De auteurs stellen WebAccessVL voor, een vision-language model (VLM) dat is ontworpen om HTML automatisch te bewerken om WCAG-2-overschrijdingen op te lossen, terwijl het oorspronkelijke visuele ontwerp behouden blijft.

1. Probleemformulering

De taak wordt geformuleerd als image-conditioned program synthesis. Het model ontvangt twee invoerstromen:

De originele HTML-code ( $x$ ).
Een screenshot van de visuele weergave van die pagina ( $I$ ).
Het doel is om een nieuwe HTML-code ( $y$ ) te genereren die minder toegankelijkheidsfouten bevat, maar visueel identiek is aan de invoer.

2. Schending-geconditioneerde VLM (Violation-Conditioned VLM)

In plaats van alleen de HTML en het beeld te gebruiken, introduceert het paper een unieke conditioning-mechanisme:

Violation Report ( $c$ ): Een toegankelijkheidschecker (zoals IBM's checker) analyseert de invoer en genereert een gestructureerd rapport met specifieke fouten (bijv. "te laag contrast", "ontbrekende alt-tekst").
Conditioning: Dit rapport wordt als tekst toegevoegd aan de prompt van het VLM. Het model leert hierdoor specifiek gericht te werken op de gemarkeerde elementen in plaats van willekeurige wijzigingen aan te brengen.

3. Negatieve Guidance Sampling

Om de effectiviteit van de conditionering te versterken, gebruiken de auteurs classifier-free guidance.

Tijdens het genereren van tokens wordt de logit berekend als een combinatie van de voorwaarde met het foutenrapport en een voorwaarde zonder rapport (onvoorwaardelijk).
Formule: $\ell_{NG} = \ell(c_\emptyset) + \gamma \cdot (\ell(c) - \ell(c_\emptyset))$ .
Dit zorgt ervoor dat het model tokens die leiden tot gecorrigeerde HTML versterkt en tokens die de status quo behouden, onderdrukt.

4. Checker-in-the-Loop Strategie

Het systeem gebruikt een iteratieve aanpak tijdens de inferentie:

Het model genereert een eerste versie van de HTML.
De checker analyseert deze nieuwe versie en genereert een nieuw foutenrapport voor de resterende fouten.
Dit nieuwe rapport wordt teruggevoerd naar het model voor een tweede ronde van correctie.
Dit proces stopt wanneer er geen fouten meer zijn of wanneer de output niet meer verandert.

5. Dataset: WebAccessVL

De auteurs hebben een nieuwe dataset samengesteld bestaande uit 1.500 webpagina's:

Bron: Geselecteerd uit een bestaande HTML-dataset.
Annotatie: Menselijke annotators (met een achtergrond in computerwetenschappen) hebben de HTML handmatig aangepast om WCAG 2.0 te voldoen, waarbij ze zorgvuldig het visuele ontwerp behielden.
Statistieken: Ongeveer 35,8% van de fouten is visueel van aard (bijv. contrast, alt-tekst), wat de noodzaak van een VLM onderstreept.

Belangrijkste Resultaten

De methoden zijn getest op 17 verschillende modellen, waaronder open API-modellen (GPT-4o, GPT-5, Claude 3.5) en open-weight modellen (Llama 3.2, Qwen, Gemma).

Aantal Fouten: Het beste model (Gemma 3 met de voorgestelde methode) reduceerde het aantal fouten van een gemiddelde van 5,34 (in ruwe data) naar 0,211 per website.
Vergelijking met SOTA: Dit is een 87% betere prestatie dan GPT-5 (1,68 fouten), zelfs al is het gebruikte model kleiner.
Behoud van Ontwerp: Hoewel de "Structural Similarity Index Measure" (SSIM) soms laag leek (door strikte drempels), bevestigde een perceptueel onderzoek dat de visuele stijl en inhoud behouden bleven. In tegenstelling tot GPT-5, dat vaak de hele pagina herbouwt (structuur nauwkeurigheid ~0,5%), behield de voorgestelde methode 90% structuuraccuraatheid.
VLM vs. LLM: Vision-Language Modellen presteerden significant beter dan tekst-only LLMs, vooral na Supervised Fine-Tuning (SFT). Zonder visuele input konden modellen visuele problemen zoals kleurcontrast niet effectief oplossen.
Impact op Gebruikers: De methode loste 98,2% van de fouten op voor blinden/ slechtzienden en 98,2% voor motorische beperkingen.

Bijdragen

Formulering van de taak: Het definiëren van webtoegankelijkheid als een probleem van image-conditioned program synthesis.
Dataset: Het creëren van WebAccessVL, een dataset van 1.500 gepaarde HTML-bestanden met handmatig gecorrigeerde toegankelijkheidsfouten.
Modelarchitectuur: Het voorstellen van een schending-geconditioneerde VLM met negatieve guidance en een iteratieve "checker-in-the-loop" strategie.
Empirisch Bewijs: Uitgebreide experimenten die aantonen dat VLMs tekst-only LLMs overtreffen en dat de voorgestelde methode aanzienlijk beter presteert dan bestaande API-modellen, met behoud van het oorspronkelijke ontwerp.

Betekenis

Dit werk is een belangrijke stap in het automatiseren van webtoegankelijkheid. Het lost het fundamentele probleem op dat toegankelijkheid vaak visuele context vereist die in de code niet zichtbaar is. Door het combineren van visuele input, tekstuele instructies en feedback van een checker, biedt WebAccessVL een praktische oplossing voor ontwikkelaars om complexe toegankelijkheidsproblemen op te lossen zonder de gebruikerservaring te verstoren. Het paper benadrukt dat AI niet alleen regels kan controleren, maar ook contextueel kan redeneren om design-integriteit te behouden tijdens het repareren van fouten.