不能。label 的 for 属性仅支持可聚焦的原生表单控件，而 audio/video 元素非表单控件，其内置按钮位于 UA Shadow DOM 中，无公开 ID，无法被 label 绑定；必须用 JavaScript 显式调用 play()/pause() 方法实现控制。
label 能不能关联
不能。label 的 for 属性只支持明确可聚焦、可交互的表单控件，而 <audio> 和 <video> 元素本身不是表单控件，其内置的播放/暂停等按钮是浏览器 UA Shadow DOM 渲染的，没有公开的 id，也无法被 label[for] 绑定。
为什么给 video 标签加 for="my-video" 没反应？
因为 label[for] 的绑定机制依赖目标元素暴露在主 DOM 中且具有合法 id 属性——但 <video controls> 的播放按钮不是独立的 <button> 元素，它不可选中、无 ID、不响应 focus()，点击 label 完全不会触发任何行为。
-
<label for="my-video">播放</label><video id="my-video"></video>→ 点击“播放”文字无效 - DevTools 中查不到任何带
id="my-video"的可聚焦控件（<video>本身不可聚焦，除非加tabindex） - 即使手动给
<video>加tabindex="0"，label 也不会把焦点“转交”给它，因为规范不支持
想让文字触发音视频操作，该怎么做？
必须用 JavaScript 显式绑定事件，而不是依赖 label 的语义关联。核心思路是：文字作为普通按钮，调用控件的原生方法（如 play()、pause()）。
- 确保
<audio>或<video>有稳定id（如id="bgm-player"） - 用
document.getElementById()或querySelector获取媒体元素 - 为文字容器（
<button>或带role="button"的<span>）绑定click事件 - 调用
.play()/.pause()；注意自动播放策略（需用户手势触发）
示例：
<button onclick="document.getElementById('bgm').play()">播放背景音乐</button>
<audio id="bgm" src="music.mp3"></audio>
有没有更可访问的替代方案？
有，但依然绕不开 JS。label 不适用，就改用 ARIA + 手动控制：
立即学习“前端免费学习笔记（深入）”；
- 用
<button>替代<label>，设置aria-controls="bgm" - 媒体元素加
aria-live="polite"（可选，用于播报播放状态） - 监听
play/pause事件，动态更新按钮的aria-pressed和文本 - 避免用
<div onclick>—— 它默认不可聚焦、不进 Tab 顺序、屏幕阅读器无法识别为控件
关键点：音视频交互本质是命令式操作，不是表单数据绑定，label 的语义在这里完全错位。强行套用只会让代码看起来“像对了”，实则既不可访问，也不起作用。
