#无障碍访问

预计阅读时间: 6 分钟

Video.js 如何处理无障碍访问，以及如果你进行深度自定义应该考虑什么。

Video.js 在构建时考虑了无障碍访问，因此你的播放器可以覆盖最广泛的受众。

以下是我们考虑的一些无障碍访问方面。如果你进行更深入的自定义，你也应该考虑它们。

#我们针对的标准

• WAI-ARIA 1.2 定义了辅助技术用于理解控件的角色、状态和属性。

• WCAG 2.2 提供了可感知、可操作、可理解和健壮的 Web 内容的成功标准。

• CVAA 是美国联邦法律，要求视频内容提供隐藏式字幕和可访问的控件。

• ADA 是美国民权法，禁止残疾歧视。法院越来越多地将其应用于网站，包括视频播放器。

#ARIA 角色和标签

组件自动设置 ARIA 角色和属性。例如，滑块使用 role="slider" 和值属性渲染，按钮根据播放器状态更新其 aria-label，装饰性元素如时间分隔符使用 aria-hidden="true" 隐藏。

验证标签对你的内容和语言是否具有上下文正确性。每个组件的参考页面都记录了它设置的属性。

#键盘交互

所有交互组件都支持键盘控制。例如，按钮使用 Enter 和 Space 激活，滑块响应 Arrow 键、Home、End 和 Page Up/Page Down，弹出窗口使用 Escape 关闭。每个组件的参考页面都列出了其完整的键盘支持。我们遵循 WAI-ARIA 创作实践指南 中的模式。

#焦点管理

交互元素在启用时可聚焦，禁用时离开标签顺序。弹出窗口触发器使用 aria-controls 和 aria-expanded 链接到其弹出窗口。

#字幕和副标题

text tracks 功能支持字幕和副标题。美国的隐藏式字幕由 FCC 根据 CVAA 管理，该法案要求提供字幕和观众对字幕外观（字体、大小、颜色、不透明度和边缘样式）的控制。不合规会带来法律风险。WebKit Caption Display Settings 解释器 跟踪浏览器如何将这些自定义偏好原生地带入 Web 平台。

#颜色对比度

皮肤通过增加覆盖层和控件的背景不透明度来响应 prefers-contrast: more，并通过提高基线不透明度来响应 prefers-reduced-transparency: reduce，以便文本在视频上保持可读。

视频比大多数 UI 更难处理对比度，因为背景总是在变化。在暗色帧上通过检查的控件可能会在明亮的标题卡上消失。自动化工具不会捕捉到这一点，因此请针对浅色、深色和混合视频内容测试你的控件。自定义组件应针对 WCAG 1.4.3（对比度最小值） 和 1.4.11（非文本对比度） 进行测试。

#触摸目标

控件使用基于 rem 的大小，因此它们随用户的字体大小偏好而缩放。所有交互元素都设置 touch-action: manipulation 以消除触摸设备上的点击延迟。皮肤使用 pointer: fine 和 pointer: coarse 来适应鼠标和触摸输入的过渡。

如果你构建自定义控件，目标至少为 24x24 CSS 像素，符合 WCAG 2.5.8（目标大小最小值）。在触摸优先的表面上，越大越好。

#配色方案

皮肤适应 prefers-color-scheme。边框、背景和文本颜色通过 CSS 自定义属性调整。自定义组件可以使用相同的设计令牌。有关详细信息，请参阅皮肤。

#减少动画

皮肤通过简化或删除动画和过渡来尊重 prefers-reduced-motion。在自定义组件中遵循相同的模式。

#使用辅助技术测试

自动化工具可以捕捉标记问题，但会遗漏真正的可用性问题。使用屏幕阅读器（macOS 上的 VoiceOver、Windows 上的 NVDA 或 JAWS）和纯键盘导航测试你的播放器。验证每个控件是否可访问、可操作，并宣布其目的和状态。WAI "Easy Checks" 是一个很好的起点。

#进一步阅读

W3C WAI 关于使音频和视频媒体可访问和可访问媒体播放器的指南深入介绍了此处涵盖的所有内容。

---

上一步： UI 组件

下一步： 自定义皮肤