必须同时设置 aria-valuenow、aria-valuemin 和 aria-valuemax，否则屏幕阅读器无法正确播报进度数值；仅设 role="progressbar" 和 aria-valuenow 不够，因缺范围定义时浏览器会静默忽略 aria-valuenow。

必须同时设置 aria-valuenow、aria-valuemin 和 aria-valuemax，否则屏幕阅读器无法正确播报进度数值。

为什么只写 role="progressbar" 和 aria-valuenow 不够

仅加 role="progressbar" 会让辅助技术识别为“进度条”，但若缺 aria-valuemin 或 aria-valuemax，它只能读出“进度条”，不读具体百分比或当前值。浏览器（如 Chrome + NVDA）会静默忽略 aria-valuenow，因为缺少范围定义，数值无意义。

• aria-valuemin 默认为 0，但不能省略——显式声明是可访问性的硬性要求
• aria-valuemax 通常为 100，但也可设为其他值（如 200 表示“已完成 150/200”），需与业务逻辑一致
• aria-valuenow 必须是数字，且在 min/max 范围内，否则会被视为无效属性

基础 HTML 结构怎么写才合规

一个最小可用、无障碍友好的进度条应长这样：

<div role="progressbar"
     aria-valuenow="65"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="文件上传进度：65%">
  <span>65%</span>
</div>

注意几点：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• aria-label 推荐加上，用于补充语义（尤其当视觉上没显示文字时）
• 内部 <span> 是给 sighted 用户看的，不影响辅助技术解析
• 不要用 <progress> 标签再套一层——原生 <progress> 已自带 role 和 aria 属性，手动加 role="progressbar" 反而可能覆盖默认行为

动态更新时容易踩的坑

JS 修改 aria-valuenow 时，常见错误不是“没改”，而是“改得不及时”或“值非法”：

• 务必用 element.setAttribute('aria-valuenow', newValue)，而不是 element.ariaValueNow = ...（后者不触发辅助技术更新）
• 更新前检查 newValue 是否在 [min, max] 区间内，越界值会导致部分读屏器跳过播报
• 避免高频连续更新（如每 10ms 改一次），iOS VoiceOver 对快速变化的进度条响应滞后，建议合并为每 200–500ms 更新一次
• 如果进度条完成（aria-valuenow === aria-valuemax），可额外加 aria-valuetext="已完成" 来替代数字，提升语义清晰度

最常被忽略的一点：CSS 里用 width 控制视觉进度时，别忘了同步更新 aria-valuenow——样式和语义不同步，等于对屏幕阅读器撒谎。