progress标签不渲染内部文本，仅作降级提示；需用<output>或<span>等独立元素同步显示数值，并通过aria-label/aria-labelledby明确语义关联。
progress 标签不是文本标签，它本身不渲染可见文本——这是最容易误解的一点。你看到的“50%”“完成中”等文字，必须由额外的 HTML 元素（如 <span> 或 <output>）提供，progress 只负责进度视觉状态。
为什么 progress 里的文字不显示？
很多人写成 <progress value="60" max="100">60%</progress>，以为里面的内容会自动显示。实际上，这段文字只是 fallback 内容：仅当浏览器完全不支持 progress（比如 IE9 及更早）时才可见；现代浏览器会忽略它，也不把它暴露给屏幕阅读器。
- 它不是子文本节点，而是降级提示（fallback），语义上等同于“如果你看不懂这个进度条，请读这句话”
- 直接设置
innerText或textContent到progress元素上无效，DOM 不允许渲染内部文本 - 用 CSS 给
progress设font-size、color等属性毫无作用
正确添加进度文本的两种方式
必须用独立元素同步更新，并与 progress 的 value 保持一致：
- 用
<output>标签：语义最匹配，专为动态输出设计，支持for属性绑定到progress的id，例如：<progress id="uploadBar" value="0" max="100"></progress><output for="uploadBar">0%</output> - 用普通
<span id="progressText">：更灵活，可加aria-live="polite"让屏幕阅读器播报变化，例如：<span id="progressText" aria-live="polite">0%</span> - 更新时务必同步操作：
bar.value = 72; document.getElementById('progressText').textContent = '72%';
aria-label 和 aria-labelledby 怎么配？
仅靠视觉文本不够，辅助技术需要明确“这是什么任务的进度”。不能只写 aria-label="72%"，那等于告诉屏幕阅读器“当前值是 72%”，但没说明上下文。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
aria-label="文件上传进度"+ 同步更新的<output>或<span>显示具体数值 - 如果已有标题（如
<h3 id="uploadTitle">正在上传照片</h3>），可用aria-labelledby="uploadTitle"让两者关联 - 避免把数值塞进
aria-label里反复重写，会导致语音重复冗余（如“文件上传进度 10%”→“文件上传进度 11%”→…）
真正容易被忽略的是：进度文本和 progress 元素之间的语义链接必须显式建立，不能靠位置或样式暗示。否则对键盘用户、放大镜用户或屏幕阅读器用户来说，那个数字就是孤立信息——它不知道自己在描述哪个进度条，也不知道单位是百分比还是秒数。
