Accessibility issue: loading progress is not announced to screen readers

这个报错通常出现在使用 Gradio 搭建的 WebUI 中,当函数或模型推理耗时较长、组件上覆盖了一层加载状态时,屏幕阅读器(VoiceOver / NVDA)读不到任何进度反馈。优先排查的对象是前端状态跟踪组件 js/statustracker/static/index.svelte 是否缺少无

快速结论:这个报错通常出现在使用 Gradio 搭建的 WebUI 中,当函数或模型推理耗时较长、组件上覆盖了一层加载状态时,屏幕阅读器(VoiceOver / NVDA)读不到任何进度反馈。优先排查的对象是前端状态跟踪组件 js/statustracker/static/index.svelte 是否缺少无障碍(ARIA)属性。

适用环境:Issue 中确认涉及 Gradio 前端组件(js/statustracker/static/index.svelte,基于 Svelte);验证端为 macOS + VoiceOver,并提到 Windows NVDA 用户同样受影响。Python 版本、CUDA、显卡等信息在 Issue 中未提供。

最快修复方案:暂无确认的一步修复方案。Issue 为 enhancement 标签,已由贡献者提供完整修复分支(见下方步骤),但由于项目当时暂停接收 PR,该修复未被合并进官方仓库。

注意事项:贡献者分支中的修改已在 macOS VoiceOver 上验证,但 Issue 关闭时并未说明官方是否已合入对应改动,也未提供 Windows NVDA 的验证结果,因此直接引用该分支存在与上游版本产生差异的风险。

问题场景

用户在 Gradio 应用里提交一个需要数秒才能完成的函数(如模型推理、长任务处理)。任务运行期间,组件上方会显示加载状态,包括队列位置、进度条和迭代计数,但这些内容全部是视觉呈现,屏幕阅读器用户无法感知任务是否启动、进度到哪一步、在队列中排第几。对长任务来说,用户只能一直等待而得不到任何反馈。

Issue 中给出的最小复现脚本如下:

import time
import gradio as gr

def slow():
    time.sleep(8)
    return "done"

gr.Interface(slow, inputs=None, outputs="text").launch()

报错原文

Accessibility issue: loading progress is not announced to screen readers

While a function runs, the loading status that covers a component (queue position, progress bar, iteration counts) is invisible to screen readers.

The progress bar is a plain <div> with no role, and the text next to it updates silently.

原因分析

在 Gradio 当前 main 分支的 js/statustracker/static/index.svelte 组件中,没有任何 rolearia-* 属性。这意味着:

  • 进度条只是一个普通 <div>,未声明 role="progressbar",也没有 aria-valuenow / aria-valuemin / aria-valuemax 等取值属性,辅助技术无法识别它是一个进度控件。
  • 旁边的文本会随任务推进而静默更新,但页面中没有 aria-live 实时区域,屏幕阅读器不会自动朗读这些变化。
  • 校验错误区块同样缺少 role="alert",错误信息也不会被主动播报。

由于缺少以上语义标注,VoiceOver(macOS)或 NVDA(Windows)用户在提交表单后得不到“任务已开始”“进度百分比”“队列位置”“任务完成”等任何播报。

环境排查

  • 确认所用 Gradio 版本中 js/statustracker/static/index.svelte 是否包含 rolearia-* 属性;若完全没有,即命中本 Issue 描述的情况。
  • 确认浏览器与屏幕阅读器组合,Issue 中验证的是 macOS + VoiceOver,并提到 Windows NVDA 也受影响。
  • 确认触发场景是队列中的长任务(含进度条、队列位置或迭代计数显示)。
  • Issue 未提供 Python、CUDA、PyTorch、显卡等环境信息,无需在这些项目上排查。

解决步骤

官方仓库中暂无已合并的修复。Issue 中贡献者提供了一个已验证的修复分支,可优先尝试参考其改动:

  1. 查看贡献者分支与 main 的差异:https://github.com/gradio-app/gradio/compare/main...froggeric:a11y/statustracker-aria
  2. 该分支在进度条上添加了 progressbar role 及对应的 aria-value 属性。
  3. 该分支添加了一个限速的 polite 实时区域(live region),用于播报里程碑、队列位置和完成状态。
  4. 该分支在校验错误区块上添加了 alert role。
  5. 该分支在 js/statustracker/StatusTracker.test.ts 中补充了单元测试。
  6. 如需自行应用,可按分支内容修改本地 js/statustracker/static/index.svelte,并重新构建前端资源。

验证方法

在 macOS 上开启 VoiceOver,运行 Issue 中的复现脚本,提交一个耗时数秒的任务,确认能够听到任务开始、进度变化、队列位置以及完成状态的播报。贡献者已使用 VoiceOver 分别在补丁前后进行验证:补丁前问题复现,补丁后问题消失。Windows NVDA 下的效果在 Issue 中未给出验证结论。

参考来源

gradio-app/gradio #13813

贡献者修复分支:froggeric/gradio a11y/statustracker-aria

GamsGo AI

AI 工具推荐

想把多个 AI 模型放在一个入口?

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型,适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接:通过此链接购买,我可能获得佣金,不影响你的价格。

这个方案解决了吗?

celebrityanime
celebrityanime
文章: 24191

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注