A Prototype VS Code Extension to Improve Web Accessible Development

TL;DR

This work tackles the persistent challenge of web accessibility by embedding an AI-assisted workflow directly into the IDE via a VS Code extension. It combines ESLint-based static analysis with a CodeLlama-backed AI component to provide on-demand fixes (FixWithAI) and targeted analysis with AI-generated reports (CheckAndFixWithAI). The approach demonstrates feasibility and shows promising fix-generation results for detected issues, but highlights challenges in reliable error detection and the need for refined prompts to improve accuracy and reduce redundancy. Overall, the prototype demonstrates the potential to shift accessibility remediation earlier in development, reducing post-release defects and improving developer guidance, with future work aimed at broader language/framework support and more rigorous evaluation.

Abstract

Achieving web accessibility is essential to building inclusive digital experiences. However, accessibility issues are often identified only after a website has been fully developed, making them difficult to address. This paper introduces a Visual Studio Code plugin that integrates calls to a Large Language Model (LLM) to assist developers in identifying and resolving accessibility issues within the IDE, reducing accessibility defects that might otherwise reach the production environment. Our evaluation shows promising results: the plugin effectively generates functioning fixes for accessibility issues when the errors are correctly detected. However, detecting errors using a generic prompt-designed for broad applicability across various code structures-remains challenging and limited in accuracy.

Figures (3)

• Figure 1: System architecture diagram
• Figure 2: Fix suggested by the LLM inside the code file
• Figure 3: Response of the CheckAndFixWithAI use case