label 的 for 属性必须严格匹配 range 的 id，否则屏幕阅读器无法识别、点击文字不聚焦；output 标签比 span 更语义化且支持自动播报；移动端需加 cursor: pointer 确保 label 可点；aria-label 不能替代 label+for，仅限特殊场景使用。
label 的 for 属性必须匹配 range 的 id
不配对就等于没写 label——屏幕阅读器无法识别控件用途，点击文字也无法聚焦或激活滑块。浏览器只认 for="xxx" 和 id="xxx" 完全一致的字符串，大小写、空格、下划线都算错。
常见错误现象：
- 点了
label文字，滑块没反应 - 用键盘 Tab 切换时跳过滑块
- VoiceOver 或 NVDA 读不出“音量调节：滑块”这类语义
正确写法示例：
<label for="brightness">亮度</label> <input type="range" id="brightness" min="0" max="100" value="60">
注意：name 属性和 for 无关，别误以为 name="brightness" 就能绑定。
用 output 标签比 span 更语义化地显示实时值
output 是 HTML5 专为「计算结果」设计的标签，浏览器默认会把它和关联的 input 建立隐式关系（尤其配合 for 属性），比 span 更利于无障碍和表单提交逻辑。
使用场景：
- 需要动态更新当前滑块值（如“50%”、“¥2,499”）
- 后续可能扩展为带计算的表单（比如价格区间联动）
- 希望 screen reader 在值变化时自动播报
推荐写法：
<input type="range" id="price" min="0" max="10000" value="3000"><output for="price" id="priceValue">¥3,000</output>
JS 更新时直接改 output.textContent 即可，不用额外加 aria-live——现代浏览器已内置支持。
移动端点击 label 有时不触发 focus，需补 cursor:pointer
iOS Safari 和部分安卓 WebView 中，label 默认没有手型光标，用户可能意识不到可点；更关键的是，某些版本下点击 label 不触发 focus，导致键盘方向键无法微调滑块值。
解决方式很简单，加一行 CSS：
label[for="volume"] { cursor: pointer; }
不需要 JS 模拟 click，也不用监听 click 事件再手动 focus()——原生行为在加了 cursor: pointer 后基本就稳了。
容易踩的坑：
- 只给
input加cursor: pointer，但label还是默认箭头，降低可发现性 - 用
pointer-events: none覆盖了label，却忘了重开 - 在 flex 布局里
label被压缩到 0 宽，实际点不到
别用 aria-label 替代 label+for，除非真没法加 DOM 标签
aria-label 能让屏幕阅读器读出文字，但它不能替代 label 的功能：不支持点击激活、不参与表单序列化（form.elements 里查不到）、不触发 focus 状态样式（比如 input:focus + .thumb 失效）。
只有两种情况才考虑 aria-label：
- 滑块嵌在复杂组件内部（如自定义弹窗），DOM 结构不允许插入
label - 多滑块共用同一描述（如“调节红/绿/蓝通道”，每个滑块用
aria-label="红色通道"+aria-labelledby）
其他时候，老老实实写 <label for="xxx">xxx</label>。它不是装饰，是功能必需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
