移除 controls 后可访问性更难保障，因原生控件已内置键盘导航、状态同步和语义支持，而自定义控件需手动补全 role、aria 属性、焦点管理及多端交互适配，缺一则导致视障等用户无法操作。
为什么移除 controls 后可访问性反而更难保障
原生 @#@#@#@#@#@#@#@#@#@0，其中 <audio id="audio-title" aria-label="产品介绍音频"></audio>
<time datetime="00:01:23">1分23秒</time>）和语义化段落，方便跳转与检索移动端 touch 事件与键盘焦点的双重陷阱
自定义播放器在桌面端用 click + keydown 能覆盖大部分交互，但移动端会同时触发两个问题：一是 touchstart 未绑定导致按钮点击无响应（尤其旧版 Android）；二是焦点管理失效——用户用物理键盘或外接蓝牙键盘操作时，Tab 键无法顺序聚焦到音量按钮、进度条、跳转按钮，甚至焦点直接跳过整个播放器区域。
典型症状：iOS Safari 上点播放按钮没反应（实为自动播放被拦截），但换个手指重按一次又好了——本质是第一次 touch 没触发 play() 同步调用栈，第二次因已有用户手势上下文才成功。
- 所有按钮必须监听
touchstart并调用event.preventDefault()，防止 300ms 延迟，再同步触发audio.play() - 进度条
<input type="range">需支持方向键（←/→微调 1 秒，↑/↓调整 5 秒），并确保tabindex="0"可聚焦 - 用
document.activeElement监听焦点变化，当焦点进入播放器区域时，动态设置aria-live="polite"区域播报当前状态（如“已播放至 42 秒”） - 禁用
outline: none—— 焦点框不是丑，是刚需；可用outline: 2px solid #0066cc保证对比度 ≥ 4.5:1
prefers-reduced-motion 与高对比度模式的硬性适配点
很多开发者只在 Chrome 里测试动画是否流畅，却忘了系统级无障碍设置会彻底关闭过渡效果。当用户开启 Windows 高对比度模式或 macOS 的 prefers-reduced-motion，你的自定义播放器可能直接变灰白一片：图标消失、进度条轨道变透明、按钮边框被系统样式覆盖。
最常被忽略的是：CSS 中写的 background: #eee 在高对比度下会被强制替换为纯黑或纯白，导致进度条轨道不可见；而 transition: all 0.2s 在 @media (prefers-reduced-motion) 下必须设为 none，否则动画卡顿或不触发。
- 进度条轨道必须显式设
background-color和border，不能只靠渐变或透明度 - 用
@media (prefers-reduced-motion: reduce)重置所有transition、animation，并把加载动画降级为静态图标 - 所有状态图标（▶️/⏸️）必须搭配文字（“播放”/“暂停”），不能仅靠颜色或符号区分；高对比度模式下，
color可能被重置，优先用background-image或 SVG 内联图标 - 测试时务必在真实系统设置中开启高对比度模式（而非仅靠浏览器模拟器），Windows 和 macOS 行为差异极大
真正难的不是写出能播的代码，而是让每个控件在盲人用 VoiceOver、手抖用户用开关控制、色弱者开高对比度、耳聋者读文字稿时，都走同一条逻辑路径。少一个 aria- 属性，就可能切断一个人获取信息的通道。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
