如何让 progress 元素被屏幕阅读器读出当前进度文字

应为添加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"），也不要用模糊表述（如 "差不多了"）

提供隐藏但可访问的实时文本（推荐搭配使用）

在 附近添加一个 或

，用 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}%`;
bar.value = value;
bar.setAttribute('aria-valuetext', description);
text.textContent = description;
}