本身不满足语义化要求，因其被屏幕阅读器仅读作“滑块”，无法传达播放进度上下文、关联音频元素及数值单位；需通过aria-labelledby、aria-controls、aria-valuemin/max/now/text等属性建立控制关系并动态同步状态。
为什么 <input type="range"> 本身不满足语义化要求
单纯用 <input type="range"> 控制音频进度，屏幕阅读器会读作“滑块”，无法传达“当前播放位置”“总时长”“可拖动的进度条”等上下文。用户（尤其视障者）不知道它和哪个 <audio></audio> 元素关联，也不知道数值单位是秒还是百分比。
必须添加的 ARIA 属性与对应关系
让进度条真正语义化，核心是建立「控制-被控」的明确关系，并暴露状态值：
-
aria-labelledby指向一个描述性<label></label>或<span id="progress-label"></span>，内容如“播放进度” -
aria-valuemin="0"、aria-valuemax="100"固定为百分比范围（更易理解），而非原始秒数 -
aria-valuenow动态更新为当前播放百分比（需 JS 实时同步） -
aria-valuetext提供可读文本，例如"已播放 2 分 15 秒，共 4 分 30 秒"（比纯数字友好得多） -
aria-controls="my-audio-id"显式绑定到目标<audio id="my-audio-id"></audio>
HTML 结构示例与关键细节
下面是最简但语义完整的结构，注意标签顺序和 ID 关联：
<audio id="podcast" src="episode.mp3" aria-label="本期播客"></audio><div role="group" aria-labelledby="progress-label"> <span id="progress-label">播放进度</span> <input type="range" id="progress-bar" min="0" max="100" value="0" aria-controls="podcast" aria-labelledby="progress-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="已播放 0 秒，共 0 秒"> </div>
⚠️ 注意：role="group" 包裹是为了防止屏幕阅读器把 label 和 input 拆开读；aria-label 放在 <audio></audio> 上替代无意义的默认朗读；aria-valuetext 的初始值不能是空字符串或 "0%"，否则辅助技术可能跳过。
JS 同步逻辑里最容易漏掉的两件事
仅写好 HTML 不够，JS 更新必须覆盖两个方向：
- 播放时自动更新：监听
timeupdate事件，计算百分比并同时设置aria-valuenow和aria-valuetext - 拖动时反向控制：监听
input事件（不是change），用audio.currentTime = audio.duration * (event.target.value / 100)跳转，并手动触发一次timeupdate保证状态一致 - 特别注意：当
audio.duration为NaN（媒体未加载完成）时，不要硬算百分比，应先设aria-valuetext="加载中..."并禁用拖动
进度条语义化的成败，不在样式是否好看，而在每次数值变化时，aria-valuenow 和 aria-valuetext 是否严格同步、是否始终有可读文本、是否绑定正确 ID——缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
