为提升进度条可访问性，应在<progress>标签添加aria-valuetext属性以提供自然语义描述；动态更新时需同步修改该属性；有可见标签时优先用aria-labelledby关联；避免冗余或重复播报。
直接在 <progress> 标签上添加 aria-valuetext 属性即可，让屏幕阅读器读出更自然、易懂的文字说明（比如“已完成 75%”或“上传中，约剩余 2 分钟”），而不是只读数值。
基础用法：添加 aria-valuetext 属性
只需在 <progress> 元素上设置 aria-valuetext，值为描述性文本：
<progress value="75" max="100" aria-valuetext="已完成 75%"></progress>
这样，支持 ARIA 的屏幕阅读器（如 NVDA、VoiceOver）会朗读“已完成 75%”，而非仅“75 percent”。
动态更新时同步更新 aria-valuetext
如果进度是实时变化的（如文件上传），需用 JavaScript 同步更新 aria-valuetext，确保语义始终准确：
立即学习“前端免费学习笔记（深入）”；
- 每次修改
value属性时，也更新aria-valuetext - 推荐使用
element.setAttribute('aria-valuetext', text) - 示例：当 value 变为 42 时，可设为
"已处理 42 个文件，共 100 个"
配合 aria-labelledby 或 aria-describedby 提升可访问性
若已有可见的文字说明（如旁边有个 <span id="progress-label">上传中…</span>），优先用 aria-labelledby 关联它：
<span id="progress-label">上传中：照片.jpg</span><br><progress value="30" max="100" aria-labelledby="progress-label"></progress>
这样屏幕阅读器会把标签内容和进度值一起读出，比单独写 aria-valuetext 更灵活、更符合上下文。
注意事项与最佳实践
-
aria-valuetext仅用于增强语义，不影响视觉呈现，也不替代可见文字 - 避免冗余，例如
aria-valuetext="75 percent"没有额外信息，不如省略 - 不要同时用
aria-valuetext和aria-labelledby指向同一信息，可能重复播报 - 确保文本简洁、具体、有上下文（如“剩余约 1 分钟”比“进行中”更有用）
