HTML5多媒体API无障碍访问需系统性实践并符合WCAG 2.1 AA级标准：语义结构须用aria-label或figcaption补全；字幕、文字稿、音频描述必须配套提供；键盘操作与状态反馈全覆盖；适配系统级无障碍设置如prefers-reduced-motion和高对比度模式。
HTML5 多媒体 API 的无障碍访问合规性，核心是让视障、听障、运动障碍等用户能平等理解、控制和获取音视频内容。它不是“加功能”，而是从结构、属性、交互到内容交付的系统性实践，必须符合 WCAG 2.1 AA 级及以上标准。
语义结构与文本替代不可省略
多媒体元素本身不具备语义完整性，需主动补全上下文：
- 不用
alt属性——<video>和<audio>不支持该属性；改用aria-label（简明说明用途）或aria-labelledby（关联外部标题），例如：<video aria-label="2026年产品功能演示（含中文字幕）"> - 嵌套在
<figure>中时，搭配<figcaption>可被屏幕阅读器自然朗读，增强上下文感知 - 所有非装饰性图像（如封面图、海报图）必须带有效
alt，纯装饰图写alt=""，不可省略
字幕、文字稿与音轨必须配套提供
这是法律底线，也是 WCAG 1.2.2（字幕-预录）和 1.2.3（音频描述-预录）的强制要求：
- 每条字幕轨用
<track kind="subtitles">声明，且必须指定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启动带声音内容
