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