Automated LLM-Based Accessibility Remediation: From Conventional Websites to Angular Single-Page Applications
This paper proposes a modular, LLM-based system that automates accessibility remediation for both static websites and complex Angular single-page applications by directly modifying DOM elements or source code, achieving high fix rates while generating meaningful image descriptions and preserving application stability.
Original paper licensed under CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/). This is an AI-generated explanation of the paper below. It is not written or endorsed by the authors. For technical accuracy, refer to the original paper. Read full disclaimer
Imagine the internet as a giant, bustling city. For many people, this city is full of obstacles: missing ramps, doors that are too narrow, and signs written in a language they can't read. In the digital world, these obstacles are called accessibility issues. They prevent people with visual, auditory, or physical impairments from using websites and apps.
For years, fixing these problems has been like sending a team of human inspectors to walk through the city, find every broken step, and then manually rebuild it one by one. It's slow, expensive, and easy to miss a detail.
This paper introduces a super-smart, automated robot architect designed to fix these digital cities instantly. Here is how it works, broken down into simple concepts:
1. The Problem: The "Static" vs. The "Living" City
The researchers noticed that the internet has changed.
- Old Websites (Static): These are like brick-and-mortar buildings. Once built, they don't change much. You can easily walk through them and check for problems.
- Modern Apps (Single-Page Applications/SPAs): These are like living, breathing organisms (think of a high-tech video game or a complex dashboard like Google Maps). They change shape, move around, and react to you without reloading the page. Traditional tools are like flashlights; they can only see what's there right now. They can't see how the building changes when you press a button, so they miss many hidden traps.
2. The Solution: The "AI Architect"
The authors built a tool that uses Large Language Models (LLMs)—the same technology behind chatbots like me—to act as an expert accessibility architect.
Here is the step-by-step process, using a Home Renovation analogy:
Step 1: The Inspection (Detection)
The robot first scans the website.
- For Old Websites: It uses a browser to "walk" through the site, looking for broken steps (violations of accessibility rules).
- For Modern Apps: It doesn't just look at the blueprints; it actually opens the app, clicks buttons, and watches how the screen changes to find hidden traps that only appear when the app is running.
Step 2: The "Eyes" (Multimodal Analysis)
Sometimes, the robot finds a picture but doesn't know what it is. It's like finding a painting in a hallway with no label.
- The robot takes a snapshot of the image and asks an AI with "eyes" (GPT-4o): "What is happening in this picture? Describe it simply for someone who can't see it."
- It then writes a perfect description (called "alt text") and attaches it to the image, so screen readers can describe it to blind users.
Step 3: The Blueprint (Prompt Construction)
The robot doesn't just guess. It acts like a strict project manager. It gathers all the evidence (the broken code, the rules it broke, and the picture of the problem) and writes a very specific instruction to the AI: "Here is the broken code. Here is the rule. Fix it, but don't change the color or the layout. Just make it accessible."
Step 4: The Renovation (Remediation)
This is where the magic happens. The AI rewrites the code.
- For Static Sites: It acts like a temporary patch. It goes into the browser, swaps the broken code for the fixed code, and shows you the result immediately.
- For Modern Apps (Angular): It acts like a permanent contractor. It goes into the actual source code files, carefully replaces the broken parts, and saves the new files. Crucially, it does this without breaking the app's logic (like making sure the "Submit" button still actually submits data).
3. The Results: Did the Renovation Work?
The researchers tested this robot on 12 real-world websites and 6 complex software projects.
- Success Rate: It fixed about 80% of the problems on regular websites and 86% on the complex apps.
- Safety Check: They made sure the robot didn't "break the house" while fixing it. In every case, the apps still compiled (worked) correctly, and the visual design didn't get ruined.
- The "Legacy" Problem: The robot struggled a bit with very old, messy websites (like a house built with mismatched bricks from the 1980s). In those cases, it couldn't figure out the context, so it left some issues for humans to fix manually.
4. Why This Matters
Think of web accessibility as a tax that companies often put off paying until the future (called "technical debt"). This tool changes the game.
Instead of waiting until the end of a project to hire a team to fix everything, this tool allows developers to fix accessibility as they go, automatically. It turns accessibility from a "chore" into a natural part of building software, ensuring that the digital city is open to everyone, not just those who can navigate the obstacles.
In short: The paper presents a robot that uses AI to find, understand, and fix digital barriers in real-time, making the web more inclusive without slowing down developers or breaking their code.
Drowning in papers in your field?
Get daily digests of the most novel papers matching your research keywords — with technical summaries, in your language.