From Cluttered to Clear: Improving the Web Accessibility Design for Screen Reader Users in E-commerce With Generative AI

2025-02-25

AI Summary

Visually impaired users face significant challenges navigating e-commerce websites due to inconsistent HTML structure and insufficient semantic markup, resulting in poor screen reader compatibility and inefficient information retrieval. Method: This work introduces the first generative AI–based (LLM) real-time web accessibility refactoring browser extension. It integrates dynamic DOM parsing, WCAG-compliant rule modeling, and automated accessibility auditing to perform header-level structural optimization and semantic re-annotation of critical content—supporting both end-user assistance and developer debugging. Contribution/Results: Experimental evaluation demonstrates an average 38% improvement in automated accessibility scores, a 42% reduction in task completion time, and a 57% decrease in user error rate. The core innovation lies in the first application of generative AI to context-aware, dynamic webpage structural repair—moving beyond conventional static detection and manual remediation paradigms.

Technology Category

• Humans and AI: AI for Accessibility
• Search and Optimization: Algorithm Configuration
• Computer Vision: Diffusion Models for Vision

Application Category

• Economics, Online Markets and Human Computation: Economic ramifications for generative AI infrastructure and applications
• Responsible Web: Human-perceived consequences of algorithmic deployment on the web
• Search and Retrieval-Augmented AI: Efficiency and scalability of Web search engines

Abstract

Online interactions and e-commerce are commonplace among BLV users. Despite the implementation of web accessibility standards, many e-commerce platforms continue to present challenges to screen reader users, particularly in areas like webpage navigation and information retrieval. We investigate the difficulties encountered by screen reader users during online shopping experiences. We conducted a formative study with BLV users and designed a web browser plugin that uses GenAI to restructure webpage content in real time. Our approach improved the header hierarchy and provided correct labeling for essential information. We evaluated the effectiveness of this solution using an automated accessibility tool and through user interviews. Our results show that the revised webpages generated by our system offer significant improvements over the original webpages regarding screen reader navigation experience. Based on our findings, we discuss its potential usage as both a user and developer tool that can significantly enhance screen reader accessibility of webpages.

Problem

• Improving e-commerce accessibility for screen reader users
• Using GenAI to restructure webpage content
• Enhancing navigation and information retrieval for BLV users

Innovation

• Generative AI enhances accessibility
• Real-time webpage content restructuring
• Improved header hierarchy and labeling