Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

Automated LLM-Based Accessibility Remediation: From Conventional Websites to Angular Single-Page Applications

Carla Fernández-Navarro, Francisco Chicano

TL;DR

This work tackles web accessibility for both traditional static sites and dynamic Angular SPAs by introducing an end-to-end LLM-based remediation framework that detects WCAG 2.2 violations, generates context-aware fixes, and validates corrected outputs. The system operates in four modular phases—detection, multimodal context analysis, contextual prompting, and remediation execution—applied to live DOM for static pages and source code for Angular projects. Experimental evaluation on 12 static sites and 6 Angular projects demonstrates strong remediation performance ($\approx$80% for static pages and $\approx$86% for SPAs) with 100% build integrity in the Angular case and generally preserved semantic and visual fidelity. The approach offers a practical pathway to embed automated accessibility remediation into everyday development workflows and CI pipelines, reducing accessibility as technical debt and promoting inclusive design across architectures.

Abstract

Web accessibility remains an unresolved issue for a large part of the web content. There are many tools to detect errors automatically, but fixing those issues is still mostly a manual, slow, and costly process in which it is easy for developers to overlook specific details. The situation becomes even more complex with modern Single-Page Applications (SPAs), whose dynamic nature makes traditional static analysis approaches inadequate. This work proposes a system that aims to address this challenge by using Large Language Models (LLMs) to automate accessibility fixes. The proposal presents a modular workflow applicable to both static websites and complex Angular projects. The framework actively implements corrections within the DOM of static web pages or the source code of SPAs. The system was tested on 12 static websites and 6 open-source Angular projects, fixing 80% of the accessibility issues on public websites and 86% of the issues on Angular applications. Our proposal also generates meaningful visual descriptions for images while preserving the application's design and stability. This work contributes to ensuring that accessibility stops being a technical debt deferred to the future and becomes a natural part of everyday development workflows.

Automated LLM-Based Accessibility Remediation: From Conventional Websites to Angular Single-Page Applications

TL;DR

This work tackles web accessibility for both traditional static sites and dynamic Angular SPAs by introducing an end-to-end LLM-based remediation framework that detects WCAG 2.2 violations, generates context-aware fixes, and validates corrected outputs. The system operates in four modular phases—detection, multimodal context analysis, contextual prompting, and remediation execution—applied to live DOM for static pages and source code for Angular projects. Experimental evaluation on 12 static sites and 6 Angular projects demonstrates strong remediation performance (80% for static pages and 86% for SPAs) with 100% build integrity in the Angular case and generally preserved semantic and visual fidelity. The approach offers a practical pathway to embed automated accessibility remediation into everyday development workflows and CI pipelines, reducing accessibility as technical debt and promoting inclusive design across architectures.

Abstract

Web accessibility remains an unresolved issue for a large part of the web content. There are many tools to detect errors automatically, but fixing those issues is still mostly a manual, slow, and costly process in which it is easy for developers to overlook specific details. The situation becomes even more complex with modern Single-Page Applications (SPAs), whose dynamic nature makes traditional static analysis approaches inadequate. This work proposes a system that aims to address this challenge by using Large Language Models (LLMs) to automate accessibility fixes. The proposal presents a modular workflow applicable to both static websites and complex Angular projects. The framework actively implements corrections within the DOM of static web pages or the source code of SPAs. The system was tested on 12 static websites and 6 open-source Angular projects, fixing 80% of the accessibility issues on public websites and 86% of the issues on Angular applications. Our proposal also generates meaningful visual descriptions for images while preserving the application's design and stability. This work contributes to ensuring that accessibility stops being a technical debt deferred to the future and becomes a natural part of everyday development workflows.
Paper Structure (16 sections, 9 figures, 4 tables)

This paper contains 16 sections, 9 figures, 4 tables.

Table of Contents

  1. Introduction
  2. Literature review
  3. Methodology and Tool Design
  4. Detection and Discovery
  5. Multimodal Visual Analysis and Context
  6. Contextual Prompt Construction
  7. Remediation Execution
  8. Validation of Remediation Accuracy
  9. Experimental Evaluation
  10. Datasets
  11. Evaluation Metrics
  12. Results
  13. RQ1: Static Web Pages Remediation Efficacy
  14. RQ2: Angular SPAs Remediation Efficacy
  15. RQ3: Semantic Preservation
  16. ...and 1 more sections

Figures (9)

  • Figure 1: Pipeline of the repair tool
  • Figure 2: Multi-stage Validation and Verification Pipeline for AI-Generated Fixes. We can see our tool provides the content of the alt attribute of an image.
  • Figure 3: Remediation prompt template used in our reparation tool.
  • Figure 4: Prompt used for multimodal image description.
  • Figure 5: Prompt used for color contrast correction in static web pages.
  • ...and 4 more figures