aria-valuenow 必须实时更新为纯数字，配合 role="progressbar"、aria-label/labelledby 和 aria-valuemin/valuemax 三者共存，确保屏幕阅读器准确播报进度。
aria-valuenow 必须是实时可变的数字，不能写死
很多人把 aria-valuenow 当成静态属性配一次就完事，结果屏幕阅读器读出来的进度永远卡在初始值。它必须随实际进度同步更新——比如用 JavaScript 每次任务完成时重新赋值：el.setAttribute('aria-valuenow', current)。否则，视障用户听到的不是“已加载 65%”，而是“已加载 0%”（哪怕视觉上条已经走到三分之二）。
常见错误现象：
– 页面加载完后进度条视觉满格，但 NVDA/VO 仍报“0%”
– 连续触发多次更新，但只读出第一次设置的值
- 确保每次更新都调用
setAttribute（而非仅修改innerHTML或 CSSwidth） - 避免用字符串拼接赋值，如
'65%'—— 必须是纯数字65 - 若使用 React/Vue，注意属性绑定是否触发 DOM 属性真实变更（React 的
aria-valuenow={value}是 OK 的，但自定义 hook 若没触发重渲染或 ref 更新，就会失效）
进度条必须有明确的 role="progressbar" 和可访问名称
仅靠 aria-valuenow 不足以让屏幕阅读器识别为进度条。缺 role="progressbar"，它会被当成普通 div；缺可访问名称（aria-label 或 aria-labelledby），用户根本不知道这个条代表什么。
使用场景：文件上传、表单提交、页面懒加载等需要反馈耗时操作的环节
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须显式写
role="progressbar"，不能依赖语义化标签（HTML5<progress></progress>本身已内置该 role，但兼容性差，不推荐单独用） - 名称要具体，比如
aria-label="文档导出进度"，而不是笼统的"进度" - 如果进度条旁有可见文本（如“正在生成报告…”），优先用
aria-labelledby="id-of-text"，比aria-label更易维护
aria-valuemin / aria-valuemax 不是可选，而是无障碍强制要求
只设 aria-valuenow 而不设范围，会导致屏幕阅读器无法计算百分比，可能直接跳过播报，或报出“未知范围”。WAI-ARIA 规范明确要求三者共存。
参数差异：
– aria-valuemin 通常为 0，不可省略
– aria-valuemax 应与业务逻辑一致（如总文件数 12，则设 12；若为百分比进度，则设 100）
– 三者类型必须统一：全为整数，或全为小数（如 0.0 ~ 1.0）
- 不要写
aria-valuemax="100%"—— % 符号非法，只接受数字 - 若后端返回的是小数（如
0.73），则aria-valuemin="0.0"、aria-valuemax="1.0"、aria-valuenow="0.73"保持一致 - 动态变化范围（如分页加载中总数未知）属于边缘情况，此时应改用
aria-busy="true"+ 状态文本，而非强行塞假范围
视觉样式和焦点管理容易被忽略
无障碍不只是属性堆砌。一个键盘用户按 Tab 进入进度条，却无法感知焦点在哪；或者高对比度模式下进度色块完全消失——这些都会让整个 ARIA 配置失效。
性能 / 兼容性影响：
– Chrome + NVDA 组合对 aria-live 区域响应快，但对纯 ARIA 进度条变化较迟钝，需确保 aria-valuenow 变更后 DOM 确实重绘（哪怕只是加个空格）
– Safari + VoiceOver 对 role="progressbar" 的播报更严格，缺任一属性会静默跳过
- 给进度条容器加
tabindex="0"，保证可聚焦（尤其当它不是原生<progress></progress>） - CSS 中用
:focus-visible显式定义焦点样式，别依赖默认 outline - 进度色块用
background-color而非图片，确保高对比度模式下仍可见 - 避免用
opacity: 0或visibility: hidden隐藏进度条——它们仍会被读出；该隐藏时用display: none或aria-hidden="true"
aria-valuenow 更新滞后 200ms，用户就可能听到两次冲突播报；焦点样式没适配深色模式，键盘用户就卡在看不见的框里。这些细节不调试到真实设备上，根本发现不了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
