HTML5 多媒体 API 层面的无障碍访问，表面上看似技术细节，实质上关乎每一位用户——无论是视障、听障还是运动障碍者——都能平等地理解、操控并获取音视频信息。这远非“简单添加几个功能开关”所能实现，而是涵盖结构、属性、交互及内容交付的系统性工程。必须满足 WCAG 2.1 AA 级及以上标准，这是不可妥协的底线。
语义结构与文本替代不可或缺
多媒体元素本身缺乏语义信息，需要开发者主动补充上下文。具体方法如下：
- 不要依赖
alt属性——和根本不支持该属性。应改用aria-label（简洁描述用途）或aria-labelledby（关联外部标题），例如： - 若将多媒体元素嵌套在
- 所有非装饰性图像（如封面图、海报图）必须提供有效的
alt文本；纯装饰性图片应写alt="\"，但绝不可省略该属性。
字幕、文字稿与音轨必须配套提供
这是法律底线，也是 WCAG 1.2.2（字幕-预录）和 1.2.3（音频描述-预录）的强制性要求。切勿心存侥幸：
- 每条字幕轨道应使用
声明，必须指定srclang、label和src；默认启用的轨道需添加default属性。 - 至少提供一种语言的完整字幕；外语视频建议配备双语字幕（如中英文并存），方便用户按需切换。
- 在播放器旁边明确放置一个“查看文字稿”链接，指向带时间戳的 HTML 页面，支持搜索与复制功能——这比任何其他方法都有效。
- 对于关键视觉信息（如图表、操作步骤），务必添加音频描述轨道（
kind="descriptions"）或同步口播，使视障用户也能“看”懂内容。
键盘操作与状态反馈必须全面覆盖
一旦禁用默认控件，自定义 UI 的可访问性风险会急剧上升。必须人工确保每一项：
- 所有播放、暂停、音量调节、跳转按钮均需设置
role="button"，支持 Tab 聚焦、Enter/Space 触发——这是键盘操作的基本要求。 - 动态更新
aria-pressed（播放/暂停）、aria-valuenow（进度）、aria-mute（静音）等状态属性，使辅助技术能够实时感知变化。 - 使用
aria-live="polite"区域播报关键状态变化，例如“已跳转至 3 分 15 秒”“当前音量为 70%”——用户无需猜测。 - 进度条应支持方向键微调（←→），焦点始终保持可见；拖拽手柄图标需添加
aria-label="拖动调整播放进度"，避免用户找不到操作点。
适配系统级无障碍偏好设置
不要仅在浏览器中测试，还应响应操作系统层面的用户偏好。这才是真正的“无障碍”意识：
- 监听
prefers-reduced-motion媒体查询，关闭自动轮播、过渡动画等可能引起眩晕的效果。用户已明确表示“我受不了动画”，就应尊重其选择。 - 高对比度模式下，确保控件边框、图标、文字具有足够的对比度（至少 4.5:1），避免仅依靠颜色区分状态——有些用户正是依赖对比度来感知界面。
- iOS Safari 等平台需显式声明
playsinline才能支持内联播放，否则将全屏弹出，破坏上下文连续性——避免用户刚看到一半就跳转。 - 在静音策略限制下，首次播放必须由用户手势触发（如点击按钮），不得依赖
autoplay启动带声音的内容。这是对用户的尊重，也是规范要求。
