audio-video

音频/视频无障碍技能

权威来源：mgifford/ACCESSIBILITY.md 中的 examples/AUDIO_VIDEO_ACCESSIBILITY_BEST_PRACTICES.md 此技能源自该文件。如有疑问，以示例为准。

实现或审查任何音频或视频内容时，请遵循这些规则。 仅当项目包含音频或视频时，才加载此技能。

---

核心要求

无障碍媒体应为语音、声音、视觉信息和播放控件提供等效访问方式。所需的替代内容取决于媒体是纯音频、纯视频、同步媒体、预录媒体还是直播媒体。

在开始制作前，就应规划字幕、音频描述、文字稿和手语服务。应由具备资质的人员进行审核——未经审核的自动生成内容不能作为无障碍的最终交付物。应将替代内容放在媒体旁边，方便查找；媒体被嵌入、翻译、归档或迁移到其他平台时，也应保留这些内容。

---

严重程度等级（本技能）

级别	含义
严重	某类残障人士完全无法访问媒体内容
高	访问受到显著影响；不能指望通过不合理的变通方式解决
中等	访问质量下降，但仍部分可用
轻微	未遵循最佳实践；对访问的影响很小

---

媒体要求（WCAG 等级矩阵）

基于时间的媒体标准是累积的——AA 级包含适用的 A 级要求。

媒体类型	A 级	AA 级	AAA 级/其他实践
预录纯音频	文字稿（基于时间的媒体替代内容）	—	增强型呈现
预录纯视频	替代内容或等效音轨	—	媒体替代内容（1.2.8）
预录同步音频+视频	字幕；音频描述或完整媒体替代内容	音频描述	手语、扩展音频描述、媒体替代内容
直播同步音频+视频	无字幕标准	实时字幕	其他语言/描述服务
直播纯音频	无标准	无标准	等效的实时替代内容（1.2.9）

**没有有意义的音频/视觉信息时：**没有有意义音频的视频（静音或装饰性音乐）不需要字幕。没有语音的音频，如果有意义的声音传达了信息，仍可能需要文字稿。装饰性视频不传达信息，但持续运动仍可能需要暂停控件。如果所有重要视觉信息都已通过语音说明，则不需要额外的音频描述。应针对每个文件记录这些判断，不要假设所有视频的要求都相同；也不要仅为避免提供字幕/描述/文字稿，就把主要媒体标记为“文本的替代内容”。

---

严重：绝不自动播放有声媒体

<video src="intro.mp4" autoplay></video>


<video src="background.mp4" autoplay muted loop playsinline
       controls aria-label="Background animation — muted by default"></video>
@media (prefers-reduced-motion: reduce) {
  video[autoplay] { display: none; }
}

WCAG 1.4.2 并未字面上禁止所有自动播放情况——它要求对于自动播放且持续超过 3 秒的音频，提供暂停/停止机制或独立音量控制。本项目的规则更严格：完全不要自动播放有声媒体，以免干扰屏幕阅读器语音。如果因任何原因自动播放声音，停止/暂停/静音控件必须是页面上第一个可通过键盘访问的控件。

**静音自动播放并不能解决所有问题：**静音时无法听到有意义的音频；运动内容可能造成干扰或引发身体不适；与其他内容同时播放且持续 5 秒或更久的动态内容，可能需要提供暂停/停止/隐藏功能（WCAG 2.2.2）；无论是否存在字幕轨道，要求减少动态效果的用户都不应看到自动播放的装饰性动态内容。

重要：带音频的预录视频字幕

<video controls preload="metadata" playsinline poster="training-poster.jpg">
  <source src="training.mp4" type="video/mp4">
  <track kind="captions" src="training.en.vtt" srclang="en" label="English captions" default>
  <track kind="subtitles" src="training.fr.vtt" srclang="fr" label="Sous-titres français">
  <p>Your browser cannot play this video. <a href="training.mp4">Download the video</a>.</p>
</video>

对于包含对话和有意义的非语音音频的字幕轨道，请使用 kind="captions"；对于仅翻译对话的轨道，请使用 kind="subtitles"——仅包含对话的字幕不能替代原语言字幕。每种类型只能有一个 default 轨道。请以 UTF-8 编码提供 WebVTT，并使用正确的 text/vtt 媒体类型。

字幕内容必须包括： 完整的口语对话／旁白；在其他方式无法明确时标明说话者；有意义的音效／音乐提示（[door slams]）；保留原意的正确标点和大小写；与音频同步的时间；易于阅读的提示时长／换行；避免遮挡重要视觉内容的字幕位置。请勿删减词语、简化技术语言，也不要以改变原意的方式进行审查。

切勿未经人工审核就发布自动生成的字幕——合格人员必须对照音频审核完整文件，并纠正替换／遗漏／凭空添加的词语、姓名／技术术语／数字、否定词遗漏、说话者变更、标点和同步问题。未经审核的自动字幕至多只能评为严重。

开放字幕与隐藏字幕： 当平台能可靠支持隐藏字幕（可切换、可自定义）时，优先使用隐藏字幕。开放字幕（永久嵌入画面）是 WCAG 认可的技术，在无法提供隐藏字幕时也可以接受——不要一概否定，但要说明用户无法关闭字幕，也无法单独调整字幕大小。

---

重要：仅音频内容的文字稿

<figure>
  <figcaption>Episode 12: Testing with screen magnification, 34 minutes</figcaption>
  <audio controls preload="metadata" aria-label="Episode 12: Testing with screen magnification">
    <source src="episode-12.mp3" type="audio/mpeg">
    <p>Your browser cannot play this audio. <a href="episode-12.mp3">Download the episode</a>.</p>
  </audio>
</figure>
<p><a href="episode-12-transcript.html">Read the Episode 12 transcript</a>.</p>

文字稿内容（顺序须与媒体内容一致）：标题／元数据；说话者姓名；所有对话和旁白；有意义的声音／音乐信息；重要的屏幕文字；对于描述性文字稿，视觉动作／表情／演示／图表／场景转换；媒体中任何交互对应的等效说明／链接。

请以易于访问的 HTML 发布，并在播放器前后紧邻的位置提供名称明确的链接——不得仅提供下载文件或无法访问的 PDF／图片，也绝不能只放在 aria-label、工具提示或视觉隐藏元素中。稳定的锚点 URL（#transcript-ep12）便于直接分享，也便于搜索引擎发现；为了节省视觉空间，可以将内容折叠在 <details> 中，但标题／锚点必须保留在 DOM 中。文字稿的更正应与字幕和媒体版本更新保持同步。

交互式文字稿（高亮当前段落、按时间戳跳转）属于增强功能，不能替代完整的线性文字稿——跳转操作请使用按钮，为每个按钮标明易于理解的时间／主题；播放进度推进时不要移动键盘焦点；不要强制进行无法暂停的自动滚动；尊重减少动态效果的偏好；并确保在 JS 不可用时仍可阅读／复制文字稿。

---

严重：预录视频的音频描述

在 A 级，WCAG 1.2.3 允许选择音频描述或完整的媒体替代内容。在 AA 级，WCAG 1.2.5 要求为预录视频内容提供音频描述——A 级提供文字稿的选择并不能免除这项 AA 要求。如果主音频已传达所有重要的视觉信息，则无需额外描述。

<track kind="descriptions" src="training.descriptions.en.vtt" srclang="en" label="English descriptions">

当前 WCAG 技术指南将这种 <track kind="descriptions"> 技术列为建议项，且其效果取决于浏览器、播放器和辅助技术的支持情况——未经测试，切勿依赖它；如果播放器无法播放音频描述，请提供受支持且可选择的音轨或带描述的视频版本。

在制作期间规划描述内容——整合式描述（由说话者自然地说出姓名、朗读屏幕文字、讲解图表）通常最清晰，也能减少单独录制描述的需求。描述应客观、简洁，在重要对话的间隙进行，并由具备相应专业知识的人员撰写，再与盲人和低视力用户一起审阅。扩展音频描述（1.2.7，即暂停视频以留出更多时间）属于AAA 级——只有在主音频中的停顿时间不足时才需要。

---

关键：无障碍媒体播放器

不要将任何一个播放器库认定为普遍无障碍——应根据以下要求评估并测试具体版本和配置；固定依赖项版本，并审查更新。

如果原生 <audio controls>/<video controls> 能满足需求，请优先使用——原生控件可减少自定义代码，但不同浏览器的表现各不相同；应进行测试，而非假定它们足够。一排经过视觉样式设计的自定义按钮并不是无障碍播放器，除非已实现并测试完整的行为、状态、计时、字幕、描述、定位播放和全屏交互。

**控件和状态：**播放/暂停、停止、已播放时间/总时长、定位播放、音量/静音、字幕/语言选择、音频描述选择、播放速度、章节、全屏、画中画，以及按需显示文字稿。每个控件都需要无障碍名称/角色/状态/值——播放时，播放按钮的名称可以变为“暂停”；字幕切换按钮在确实只有两种状态时可以使用 aria-pressed；时间轴需要名称/最小值/最大值/当前值，以及有用的文本值（已播放时间）。**不要通过实时区域播报每个 timeupdate 事件。**在无障碍名称中保留可见标签，以支持语音输入；不要仅通过颜色传达已选音轨或静音状态。

<div class="media-controls" role="group" aria-label="Video controls">
  <button id="play-pause" aria-label="Play" type="button">…</button>
  <label for="seek" class="visually-hidden">Seek</label>
  <input type="range" id="seek" min="0" max="100" value="0" aria-label="Seek"
         aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0 seconds">
  <button id="captions-toggle" aria-label="Enable captions" aria-pressed="false" type="button">CC</button>
</div>

**键盘：**所有控件都应能按逻辑顺序通过 Tab 键访问；按钮应原生支持 Enter/Space 键操作；范围控件和有明确文档说明的复合组件应支持方向键操作；焦点不得困在播放器或全屏模式中；焦点应保持可见，且不被自动隐藏的控件遮挡；进入和退出全屏时应保留符合逻辑的焦点位置；控件及其后代元素拥有焦点时不得消失。单字符快捷键必须符合 WCAG 2.1.4（可关闭/重新映射/仅在焦点位于特定区域时启用），且不得在用户于字段中输入时拦截按键。

**视觉/触控：**文本/图标应符合对比度要求；在 400% 缩放时控件应能重排；触控目标应符合 WCAG 2.5.8；在强制颜色模式下，标签/图标仍应易于理解；不得要求指针悬停才能显示访问控件的唯一途径；自动隐藏控件应符合“悬停或焦点时显示内容”（1.4.13）的要求，且绝不隐藏当前获得焦点的控件。

**字幕/描述控件：**无需开始播放即可轻松找到；当前语言和开启/关闭状态应能通过程序确定；更改音轨不得意外重置播放；如承诺保留偏好设置，则应予以保留。

---

严重：嵌入式播放器和第三方播放器

内容所有者仍需对嵌入内容所提供的体验负责。

<iframe src="https://media.example.org/embed/accessibility-training"
        title="Video: Accessibility testing training" allowfullscreen></iframe>
<p><a href="accessibility-training-transcript.html">Read the descriptive transcript</a>.</p>

检查：iframe 有简洁且能识别内容的标题；键盘用户可以进入、操作和离开播放器；控件具有正确的名称、状态和焦点指示；字幕已发布、内容准确且可供选择；提供音频描述；自动播放、广告、同意提示和全屏功能仍可访问；文字稿和带描述版本的链接在 iframe 之外仍可用。不要未经测试就相信供应商关于无障碍性的声明；请测试实际配置的播放器及其当前版本。

---

中等：装饰性背景视频

如果静态图片能传达相同的设计效果，请避免使用背景视频。如果保留，则必须：

• 不传达任何信息（只有确实属于装饰性内容时，才保留 aria-hidden="true"）
• 静音播放，并提供静态海报图或备用内容
• 用户请求减少动态效果时，不自动播放
• 始终提供可用的播放／暂停控件
• 符合闪烁要求

<video id="background-video" muted loop playsinline preload="metadata"
       poster="background-still.jpg" aria-hidden="true">
  <source src="background-video.mp4" type="video/mp4">
</video>
<button type="button" id="background-video-toggle" aria-controls="background-video">
  Play background video
</button>

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
reduceMotion.addEventListener('change', (event) => {
  if (event.matches) { backgroundVideo.pause(); updateBackgroundVideoButton(); }
});
if (!reduceMotion.matches) backgroundVideo.play().then(updateBackgroundVideoButton);

CSS animation-play-state 不会暂停 HTML <video>——请通过媒体元素 API 控制播放。用户更改偏好设置或手动暂停后，不要自动重新启动动态效果。如果视频传达信息，请移除 aria-hidden="true" 并提供所有适用的替代内容——添加装饰性标签并不会让信息性内容变成装饰性内容。

---

严重：实时字幕（WCAG 1.2.4 AA）

实时同步媒体在 AA 级别必须提供字幕——一般性的“技术上可行”例外并不适用。 WCAG 1.2.4 针对实时同步广播；它并未笼统要求为每次私下的双向通话都提供字幕，但主持人／内容提供者仍必须满足活动和受众所需的无障碍需求。

请在活动前做好规划：签约并安排字幕服务（CART）；向字幕员提供姓名、术语、脚本、幻灯片和流程安排材料；在实际播放器／平台中测试字幕显示；核实语言和发言人标识；为字幕故障准备备用方案；确保聊天、投票和控件可通过键盘和屏幕阅读器访问；与口译员进行彩排。全程监控字幕质量——显示字幕徽标或供应商设置并不能证明与会者收到的是可用字幕。

活动结束后发布存档时：修正实时字幕；添加／修订描述；发布文字稿；移除无法访问的临时聊天／投票内容；将录制内容作为预录媒体重新测试。

---

中等：WCAG 1.4.2 音频控制（不同于自动播放）

即使播放由用户发起，本要求仍然适用：如果音频自动连续播放超过 3 秒，则必须提供暂停／停止方式，或提供独立于系统音量的音量控制。

<button type="button" id="mute-toggle" aria-label="Mute background audio" aria-pressed="false">…</button>

---

轻微：手语（WCAG 1.2.6——AAA 级）

AA 级合规不要求提供手语，但对于以手语为主要语言的聋人用户，这是质量最高的便利措施——请考虑为优先级较高的内容（安全信息、入门指导、重要公告）提供手语。手语并非通用——请明确标出具体语言（ASL、BSL、LSQ 等）。手语应作为单独的视频轨道提供，而非叠加在字幕上——确保手语者的脸部／手部／身体／手语空间清晰可见，并具备足够的分辨率、对比度、光线和帧率；与节目同步；避免字幕遮挡手语者；在播放器支持时，允许用户选择／调整大小／重新定位手语画面；请手语使用者进行审核。手语是字幕的补充，而非替代。

元数据与语言

在播放器之前，提供可见信息，帮助用户决定是否使用媒体以及如何使用：描述性标题、简短用途／摘要、时长、口语和手语、字幕是否可用及其语言、音频描述／文字稿是否可用、内容警告，以及用于提示内容过时风险的日期／版本。正确设置页面和局部语言标记——字幕／描述／媒体替代内容的语言通常应与原内容一致；准确标注译制字幕／文字稿。不要仅用旗帜标示语言——应以文字写明语言名称。

---

制作工作流

录制前： 对计划制作的媒体类型进行分类并确认 WCAG 要求；为字幕／描述／文字稿／口译／质量检查预留预算；在自然合适的地方，将重要视觉信息写入脚本；避免不必要的背景音频／闪烁视觉效果；选择支持所需轨道的平台；为字幕人员确认术语／姓名／发音。

制作期间： 录制清晰且音量充足的语音；口头说明重要的姓名／标题／URL／图表结论；留出停顿以便提供标准音频描述；让重要文字保持足够长时间的可见状态，以便用户感知；确保手语使用者／演示内容清晰入镜；避免将视觉内容放在字幕／控件会遮挡的位置。

发布前： 对照最终音频审核字幕；对照最终剪辑审核文字稿／描述；核实每种语言／轨道的标签；测试最终编码的媒体，而不只是制作文件；在未登录编辑器的情况下测试第三方嵌入内容；确认播放器故障时仍可使用替代内容；记录审核人员／日期／版本／后续问题。

---

测试

• 字幕： 开启字幕并在可对照音频的情况下观看完整媒体；核实每个口语词语、姓名／数字／技术术语／否定表达、说话人／声音标识、同步情况、提示顺序／换行／显示时长；确认字幕不会遮挡视觉内容；测试每种语言和全屏显示
• 文字稿／描述： 不播放媒体，直接阅读文字稿并确认含义等效；确认在需要描述性文字稿时已包含视觉信息；不看屏幕，收听带描述的版本；核实描述不会覆盖重要对白；邀请聋人、听障人士、聋盲人士、盲人、低视力人士和手语使用者参与质量审核
• 键盘／屏幕阅读器： 使用键盘访问每个控件；操作按钮／滑块／菜单／字幕／描述／速度／全屏功能；确认名称／角色／状态／值；确认控件显示／隐藏时焦点始终可见且顺序合理；进入／退出嵌入式和全屏播放器时不会陷入键盘陷阱；确认进度更新不会被持续播报
• 视觉／动态效果／触控： 200%／400% 缩放；窄视口、横竖屏方向；强制颜色／高对比度；在页面加载前启用减少动态效果，并确认自动播放的动态效果受到抑制；可通过触控操作的暂停控件；目标尺寸；如果媒体可能接近阈值，则进行闪烁内容分析
• 现场活动： 完整排练字幕／口译信号源；测试参会者在没有演示者权限时的访问；模拟字幕服务／网络故障；核实活动期间可联系到支持人员

自动化检查可以检测自定义控件是否缺少可访问名称、ARIA 是否无效、键盘焦点顺序是否存在问题、<track> 属性是否缺失／格式错误、WebVTT 语法错误、ID 重复、对比度问题，以及有声自动播放配置问题——但无法判断字幕准确性、文字稿是否等效、描述质量、手语质量或现场交付质量。必须进行人工内容和交互审核。

常见失败

失败	修正
因技术难度而将实时字幕视为可选项	为 AA 级实时同步媒体规划并提供字幕——不以可行性为条件
发布未经审核的自动字幕	审核并更正完整的字幕文件
只为对话添加字幕	纳入有意义的非语音音频和说话者身份
拒绝所有开放字幕	在不支持隐藏字幕时，将开放字幕视为有效方案进行评估
仅通过下载链接提供仅音频内容的文字稿	提供易于查找且无障碍的 HTML 文字稿
将文字稿视为 AA 级音频描述的替代方案	当视觉信息需要音频描述时，按照 1.2.5 提供音频描述
将扩展音频描述归为 AA 级	它属于 AAA 级（1.2.7）
仅依赖 track kind="descriptions" 而不进行测试	测试其支持情况；提供受支持的描述轨道或版本
将某个播放器推荐为普遍无障碍	评估并测试所选版本和配置
发布缺少完整行为的装饰性自定义控件	使用原生控件，或实现并测试完整的播放器界面
通过实时区域播报每次播放时间更新	显示时间轴值，但不要使用持续播报的实时区域
声称 WCAG 1.4.2 明确禁止所有有声自动播放	准确应用该准则；另行采用更严格的项目规则
认为静音自动播放就一定可接受	提供动态效果控制并尊重减少动态效果偏好
使用 CSS animation-play-state 暂停视频	使用媒体元素 API
提供手语却不注明语言	使用受众所需的语言并标明语言
未经测试便相信第三方的无障碍声明	测试当前配置的播放器；将替代方案放在嵌入内容之外

---

完成标准检查清单

• 已将媒体分类为仅音频／仅视频／同步／实时／预先录制；已记录适用的 A/AA 级替代方案
• 没有自动播放的有声媒体
• 如果视频自动播放（静音），prefers-reduced-motion 会禁用自动播放；暂停控件始终可用
• WCAG 1.4.2：持续 3 秒或更长时间的音频具有无障碍的停止／暂停／静音功能
• 所有含音频的预先录制视频均有同步字幕
• 自动生成的字幕在发布前由人工审核并更正
• 所有仅音频内容均有文字稿；提供易于查找的 HTML，而非仅提供 PDF／下载文件
• 文字稿可通过稳定的锚点 URL 直接链接
• 所有包含重要且未以语音表达的视觉内容的预先录制视频均有音频描述（AA）
• 实时同步媒体配有经过测试的实时字幕服务
• 已针对本项目评估／测试媒体播放器——不能仅凭其库的声誉认定其无障碍
• 所有媒体播放器控件均可通过键盘操作，并显示可见的焦点指示器
• 正确播报播放／暂停／音量／字幕状态；不持续播报 timeupdate
• 嵌入式／第三方播放器具有简洁的 iframe 标题；文字稿／描述链接位于 iframe 之外
• 媒体元数据注明时长、语言和可用的替代方案

---

WCAG 关键准则

• 1.2.1 预先录制的仅音频和仅视频内容（A）
• 1.2.2 预先录制的字幕（A）——缺失时属严重问题
• 1.2.3 预先录制内容的音频描述或媒体替代方案（A）
• 1.2.4 实时字幕（AA）——缺失时属严重问题，不可用一般可行性作为豁免理由
• 1.2.5 预先录制内容的音频描述（AA）——缺失时属严重问题
• 1.2.6 预先录制内容的手语（AAA）
• 1.2.7 预先录制内容的扩展音频描述（AAA）
• 1.4.2 音频控制（A）——无法停止自动播放的音频时属严重问题
• 2.1.4 字符键快捷键（A）
• 2.2.2 暂停、停止、隐藏（A）
• 2.3.1 三次闪烁或低于阈值（A）

---

参考资料

• 完整最佳实践指南
• W3C WAI：让音频和视频媒体更易于访问
• WebVTT 规范（W3C）
• 技术 H95：使用 track 提供字幕
• 技术 G9：为实时同步媒体创建字幕
• WCAG 2.2 理解 1.2 基于时间的媒体概览
• WCAG 2.2 理解 1.4.2 音频控制

**标准展望：**预计 WCAG 3.0 将保留 1.2.x 基于时间的媒体要求的实质内容。 关注：https://www.w3.org/TR/wcag-3.0/