From Code to Compliance: Assessing ChatGPT's Utility in Designing an Accessible Webpage -- A Case Study

📄 arXiv: 2501.03572v2 📥 PDF

作者: Ammar Ahmed, Margarida Fresco, Fredrik Forsberg, Hallvard Grotli

分类: cs.HC, cs.AI, cs.CL

发布日期: 2025-01-07 (更新: 2025-07-17)

💡 一句话要点

评估ChatGPT在可访问网页设计中的应用：一个案例研究

🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)

关键词: Web可访问性 ChatGPT 提示工程 视觉辅助 WCAG 大型语言模型 人机协作

📋 核心要点

  1. 当前大量网站未能满足Web可访问性标准，使得残疾人士访问数字内容受阻，亟需有效解决方案。
  2. 本研究探索利用ChatGPT生成和改进网页，使其符合WCAG标准，核心在于提示工程和视觉辅助。
  3. 实验表明，ChatGPT在解决简单可访问性问题上表现良好，但复杂问题仍需人工干预，提示工程显著提升性能。

📝 摘要（中文）

Web可访问性旨在确保残疾人士无障碍地访问和互动数字内容，但大多数常用网站未能达到可访问性标准。本研究评估了ChatGPT（GPT-4o）在生成和改进符合Web内容可访问性指南（WCAG）的网页方面的能力。虽然ChatGPT在提示下可以有效地解决可访问性问题，但其默认代码通常不符合标准，反映了其训练数据和普遍存在的不可访问Web实践的局限性。自动化和手动测试表明，它在解决简单问题方面表现出色，但在处理复杂任务时面临挑战，需要人工监督和额外迭代。与之前的研究不同，我们结合了手动评估、动态元素，并利用ChatGPT的视觉推理能力以及提示来修复可访问性问题。提供截图与提示一起使用，通过允许它分析周围组件（例如确定适当的对比色）来增强LLM解决可访问性问题的能力。我们发现，有效的提示工程（例如提供简洁、结构化的反馈并结合视觉辅助）可以显著提高ChatGPT的性能。这些发现突出了大型语言模型在可访问Web开发中的潜力和局限性，为开发人员创建更具包容性的网站提供了实用指导。

🔬 方法详解

问题定义：论文旨在评估ChatGPT在生成和改进符合Web内容可访问性指南（WCAG）的网页方面的能力。现有方法，即直接使用ChatGPT生成网页，往往无法满足可访问性标准，因为其训练数据和互联网上普遍存在的网页实践中存在大量不可访问的设计。

核心思路：核心思路是通过有效的提示工程（Prompt Engineering）和视觉辅助（Visual Aids）来引导ChatGPT生成更符合WCAG标准的网页。通过提供简洁、结构化的反馈，并结合网页截图，使ChatGPT能够更好地理解和解决可访问性问题。

技术框架：研究采用案例研究方法，首先使用ChatGPT生成初始网页，然后通过自动化工具和人工评估识别可访问性问题。接着，通过精心设计的提示，包括文本描述和网页截图，指导ChatGPT修复这些问题。最后，再次进行评估，迭代优化提示，直至网页满足可访问性标准。整个流程强调人工监督和迭代优化。

关键创新：关键创新在于结合了视觉信息和提示工程来提升ChatGPT在可访问性问题上的表现。以往研究主要依赖文本提示，而本研究发现，提供网页截图能够帮助ChatGPT更好地理解上下文，例如识别对比度问题。此外，研究强调了结构化反馈的重要性，即清晰地指出问题所在，并提供明确的改进方向。

关键设计：研究中使用的提示包括：1) 详细描述需要修复的可访问性问题；2) 提供网页截图，以便ChatGPT分析周围组件；3) 给出明确的改进建议，例如修改颜色对比度或添加替代文本。研究人员还探索了不同提示策略的效果，例如使用更简洁或更详细的描述，以及提供不同类型的视觉辅助。

🖼️ 关键图片

fig_0
fig_1
fig_2

📊 实验亮点

研究表明，ChatGPT在解决简单可访问性问题方面表现良好，但复杂问题仍需人工干预。通过结合网页截图和结构化反馈，ChatGPT修复可访问性问题的能力显著提升。例如，通过提供截图，ChatGPT能够更好地识别颜色对比度问题并进行修复。有效的提示工程能够显著提高ChatGPT的性能。

🎯 应用场景

该研究成果可应用于Web开发领域，帮助开发者利用大型语言模型更高效地创建可访问的网站。通过结合提示工程和视觉辅助，可以降低Web可访问性开发的门槛，提升网站的包容性，使更多残疾人士能够无障碍地访问互联网。

📄 摘要（原文）

Web accessibility ensures that individuals with disabilities can access and interact with digital content without barriers, yet a significant majority of most used websites fail to meet accessibility standards. This study evaluates ChatGPT's (GPT-4o) ability to generate and improve web pages in line with Web Content Accessibility Guidelines (WCAG). While ChatGPT can effectively address accessibility issues when prompted, its default code often lacks compliance, reflecting limitations in its training data and prevailing inaccessible web practices. Automated and manual testing revealed strengths in resolving simple issues but challenges with complex tasks, requiring human oversight and additional iterations. Unlike prior studies, we incorporate manual evaluation, dynamic elements, and use the visual reasoning capability of ChatGPT along with the prompts to fix accessibility issues. Providing screenshots alongside prompts enhances the LLM's ability to address accessibility issues by allowing it to analyze surrounding components, such as determining appropriate contrast colors. We found that effective prompt engineering, such as providing concise, structured feedback and incorporating visual aids, significantly enhances ChatGPT's performance. These findings highlight the potential and limitations of large language models for accessible web development, offering practical guidance for developers to create more inclusive websites.