progress标签默认含role="progressbar"，但需手动添加aria-label、aria-valuenow和aria-valuemax；实时更新须配合aria-live="polite"与aria-atomic="true"，并同步更新value和文本；降级方案须保留语义与可访问性。
progress 标签默认就带 role="progressbar"，但 aria-label 必须手动加
浏览器会自动给 <progress> 添加 role="progressbar" 和 aria-valuemin="0"，但 aria-valuenow 和 aria-valuemax 不会自动推导——哪怕你写了 value="65" max="100"，屏幕阅读器仍可能读成“进度条，未指定值”。必须显式补全：<progress value="65" max="100" aria-label="文件上传进度：65%"></progress>。
常见错误：
- 只写
aria-labelledby指向外部文字，但没确保该文字实时更新（比如文字是静态的“上传中”，没同步百分比） - 用
title属性替代aria-label，而title在多数屏幕阅读器中默认不播报 - 把百分比文字塞进
<progress>65%</progress>—— 这是 fallback 内容，仅在浏览器完全不支持时才显示，且不可访问
实时更新时必须配 aria-live="polite"
单纯改 progress.value = 72 不会触发屏幕阅读器播报。要让视障用户感知变化，得把进度文本和 <progress> 放在同一个语义组里，并用 aria-live="polite" 声明区域可变：
<div aria-live="polite" aria-atomic="true"> <progress id="uploadBar" value="0" max="100" aria-label="文件上传进度"></progress> <span id="progressText">已上传 0%</span> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
aria-atomic="true"确保整段文本（如“已上传 72%”）被完整播报，而不是只读“72%” - 每次 JS 更新进度时，必须同步更新
progress.value和progressText.textContent，否则播报内容与 UI 不一致 - 别用
aria-live="assertive"，它会打断用户当前操作，仅适合错误提示
不能依赖颜色或位置表达进度状态
WCAG 1.4.1 要求信息不单靠颜色传达。<progress> 的填充色（比如绿色变红）对色觉障碍用户无效。必须辅以其他通道：
- 在
aria-label或相邻文本中明确写出数值或状态（如“低：20%”“中：65%”“高：95%”） - 用图标辅助：✅ 表示完成，⚠️ 表示警告，❌ 表示失败（需同时提供文字替代）
- 避免仅靠进度条长度判断“快/慢”——不同设备缩放、DPI 下视觉长度差异大，必须靠数字锚定
IE11 及更早版本不支持 progress，降级方案要真能用
IE11 渲染 <progress> 为空白节点，且不触发任何事件。检测和替换不能只靠 document.createElement('progress').toString() !== '[object HTMLProgressElement]'，因为部分 polyfill 会伪造构造函数。
可靠做法：
- 用特性检测：
const supportsProgress = 'max' in document.createElement('progress'); - 降级容器必须保留语义结构：
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><span class="bar"></span></div> - JS 更新时，同时操作原生
progress和降级div的aria-valuenow与子元素宽度，不能只改一个
最易被忽略的是：降级后仍要维持 aria-live 区域和文本同步逻辑，否则 IE 用户反而失去无障碍支持。
