应为添加aria-valuetext属性并配合aria-live="polite"隐藏文本,同步更新自然语言描述(如“已完成72%”),同时确保value、max及aria-label等原生语义完整。

默认情况下, 元素虽有语义,但多数屏幕阅读器(如 NVDA、VoiceOver)不会自动读出“已完成 65%”这类动态文字,仅可能读出角色(progressbar)和当前值(value),缺乏自然语言描述。要让进度文字被清晰、准确地朗读,需结合 ARIA 属性与辅助文本配合。
添加 aria-valuetext 属性
这是最直接有效的方式。它为屏幕阅读器提供可读的进度描述,覆盖默认数值,且会随 value 动态更新。
- 设置
aria-valuetext为自然语言字符串,例如"已完成 72%"或"第 3 步,共 5 步" - 务必在 JavaScript 中同步更新该属性,确保与
value和max保持一致 - 避免仅写数字(如
"72"),也不要用模糊表述(如"差不多了")
提供隐藏但可访问的实时文本(推荐搭配使用)
在 不要忽略原生属性,它们是无障碍的基础支撑: bar.value = value;
bar.setAttribute('aria-valuetext', description);
text.textContent = description;
}
附近添加一个 或 aria-live="polite" 实时播报变化,增强兼容性(尤其对旧版读屏)。 同一逻辑容器内(如 class="sr-only"(或 visually-hidden)隐藏视觉样式,但保留在可访问树中确保基础语义完整
value 和 max(或省略 max 使用默认 100),否则 aria-valuenow 和 aria-valuemax 将失去上下文 添加 aria-label 或关联 ,说明进度用途(如 "文件上传进度")示例代码(含 JS 动态更新)
function updateProgress(value) {
const bar = document.getElementById('compressProgress');
const text = document.getElementById('progressText');
const percent = Math.round(value);
const description = percent === 100
? '已完成'
: `已完成 ${percent}%`;










