无障碍开发：让视频也能听得见-JavaScript中文网-JavaScript教程资源分享门户

在网络应用的开发过程中，一般都会考虑到用户的需求和使用方式。然而，有些用户可能具有视力和听力等方面的障碍，在观看视频时会遇到很大的困难。这时候，我们需要采取相应的措施，让视频也能变得适合他们的需求。

无障碍网页设计标准

在进行无障碍性设计时，可以参考无障碍网页设计标准（Web Content Accessibility Guidelines, WCAG）的4个主要原则：

可感知性：不论用户使用的是什么设备，都能够获得与内容相关的信息。
可操作性：使用任何设备无妨轻易地交互（或使用功能）。
易懂性：内容与用户的语言、知识等层面相一致，且容易理解。
健壮性：具备健壮性，也就是兼容不同的设备和技术。

以上四个原则反映了一个好的无障碍网页需要遵循的方向和基本要素。从这些方面入手来设计无障碍视频应用是非常有帮助的。

无障碍视频设计的要点

随着越来越多的用户使用移动设备的发展，无障碍视频设计需要满足的要点日益多样化。以下是几个常见的要点：

1. 提供视频标题和简介

先从网页上的信息开始考虑：网页需要提供有关视频内容的标题和简介。标题能够传达关键信息，简介是更具体的解释。提供视频的标题和简介可以帮助用户进行快速准确的判断，是否要花费时间观看。

<h1>视频标题</h1>
<p>这是视频的简介信息</p>

2. 为视频提供文字描述

无障碍设计的重要原则是在不影响站点设计体验的基础上提供不同的媒体呈现方式。因此，为视频提供文字描述是非常重要的。文本描述可以插入无障碍标记，使用户可以听到视频的重要信息。

<video controls>
  <source src="videos/example.mp4" type="video/mp4">
  <track label="字幕" kind="captions" src="videos/example.vtt" srclang="en">
</video>

3. 使用无障碍的视频播放器

当用户使用键盘或辅助设备等操作视频时，播放器的使用方式也应考虑其中。关键是确保无障碍播放器可以支持键盘控制，例如，播放/暂停按钮可以通过空格或Enter键进行控制，同时，音量条和快进或快退的功能也应该是键盘可访问的。

<video controls>
  <source src="videos/example.mp4" type="video/mp4">
  <track label="字幕" kind="captions" src="videos/example.vtt" srclang="en">
</video>

4. 使用背景音乐时请小心

当我们同时使用背景音乐和视频时，需要小心处理。如果在视频中使用背景音乐，请确保在适当的时间该音乐会被淡入淡出的方式开启和关闭。这样，当用户正在依赖音频来使用网站时，他们不会因过度混杂而感到困惑。

5. 使用视频字幕

对于聋哑人士或跟随不了视频节奏的人群来说，使用字幕是非常有必要的。字幕是在视频内容的底部或顶部出现的一段文本，并且需要根据视频的剧情和演讲实时更新。

<video controls>
  <source src="videos/example.mp4" type="video/mp4">
  <track label="字幕" kind="captions" src="videos/example.vtt" srclang="en">
</video>

总结

无障碍视频设计是进行无障碍性设计重要的方面之一。在设计中注意以上几点可以提高用户体验和访问体验质量，从而满足不同用户的需求。正确地使用无障碍标记可以使视频随时随地使用，无需额外的设备或安装。无障碍式的设计可以获得更多的受众，即使不是为了遵循相关指南，而是通过良好的用户体验创造出来的结果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647624c4968c7c53b0309d77