Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

LLM-Driven Optimization of HTML Structure to Support Screen Reader Navigation

Yaman Yu, Bektur Ryskeldiev, Ayaka Tsutsui, Matthew Gillingham, Yang Wang

TL;DR

This paper tackles the accessibility barriers faced by blind and low-vision users on online shopping sites by employing a GenAI-driven system that dynamically restructures HTML to improve screen reader navigation. A four-phase methodology—formative study, GenAI-based implementation, automated evaluation, and user testing—demonstrates that regenerated HTML and reorganized HTML tags enhance header hierarchy, labeling, and navigational efficiency, while maintaining content integrity. Automated tools (Lighthouse, SortSite, AChecker) and a user study with 15 screen reader users on Mercari reveal statistically significant improvements in usability and task performance, with semantic similarity between original and regenerated content remaining high ($>95\%$ in many cases). The work emphasizes GenAI as a tool to assist developers and users, not to replace inclusive design practices, and discusses generalizing the approach to broader website categories and longer-term integration within development pipelines. Overall, the study provides evidence that GenAI-driven web accessibility improvements can reduce user effort and improve accessibility outcomes in practical, real-world contexts.

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.

LLM-Driven Optimization of HTML Structure to Support Screen Reader Navigation

TL;DR

This paper tackles the accessibility barriers faced by blind and low-vision users on online shopping sites by employing a GenAI-driven system that dynamically restructures HTML to improve screen reader navigation. A four-phase methodology—formative study, GenAI-based implementation, automated evaluation, and user testing—demonstrates that regenerated HTML and reorganized HTML tags enhance header hierarchy, labeling, and navigational efficiency, while maintaining content integrity. Automated tools (Lighthouse, SortSite, AChecker) and a user study with 15 screen reader users on Mercari reveal statistically significant improvements in usability and task performance, with semantic similarity between original and regenerated content remaining high ( in many cases). The work emphasizes GenAI as a tool to assist developers and users, not to replace inclusive design practices, and discusses generalizing the approach to broader website categories and longer-term integration within development pipelines. Overall, the study provides evidence that GenAI-driven web accessibility improvements can reduce user effort and improve accessibility outcomes in practical, real-world contexts.

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.

Paper Structure

This paper contains 73 sections, 4 figures, 5 tables.

Table of Contents

  1. Introduction
  2. Related Work
  3. Online (Shopping) Accessibility Challenges
  4. Improving Web Browsing Accessibility
  5. AI-Driven Web Accessibility and Design
  6. Methodology Overview
  7. Participants recruitment.
  8. Formative Study
  9. Participants Demographics
  10. Semi-Structured Interview Procedure
  11. Data Analysis
  12. Interview Findings
  13. Current Accessibility Challenges on Shopping Websites
  14. Inappropriate Use of HTML Tags and Labels.
  15. Too many headings.
  16. ...and 58 more sections

Figures (4)

  • Figure 1: Methodology Overview--- Note that participants of the user evaluation (step ❹) do not overlap with those in steps ❶.
  • Figure 2: Option 1 pipeline overview, prompting GPT-4o model to completely rewrite HTML code
  • Figure 3: Option 2 pipeline overview, prompting GPT-4o to rewrite only some parts of the HTML code
  • Figure 4: Comparison of participant responses and task performance across the three webpage versions.