无障碍性是一种应该被所有开发人员关注的非常重要的主题。它确保所有用户无论身体或认知状况都能够访问网站上的信息。
多媒体是网站中经常用到的一种元素，但是它以音频或视频的形式存在时，却很容易成为访问障碍。HTML5 和 ARIA（可访问性增强技术）提供了一些支持，在让多媒体无障碍访问方面提供了很多帮助。
HTML5 提供的支持
HTML5 通过在 video 和 audio 标签中引入一些新特性来增加多媒体的无障碍性。
控制条
video 和 audio 标签表示的是多媒体在网页上的视图。控制条可以让用户控制多媒体播放，例如开始，暂停和重新启动等。HTML5 提供了 controls 属性来在 video 和 audio 标签中添加控制条，这让用户更容易地控制多媒体播放。
<video controls src="example.mp4"></video>
视频描述
盲人用户需要一个描述视频内容的文本来了解视频的内容。HTML5 提供了一个 track 元素来实现这一点。这个元素指定了一个 .vtt 文件，这个文件包含了文本以描述音轨或视频轨。
<video controls src="example.mp4">
<track kind="description" src="example.vtt" />
</video>替代文本
虽然不是 HTML5 的新功能，但是替代文本是确保无障碍性的关键。它是一种简短的文本描述，当多媒体不能被显示时，用户会自动阅读它。在 video 和 audio 标签中，你可以将描述作为标题提供。
<video controls src="example.mp4" title="A short video about pandas"></video>
ARIA 提供的支持
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 是一个提供给开发者非常有用的技术，目的是用于构建先进的、动态的 Web 应用程序，以及提高 Web 内容和 Web 应用程序的可访问性。ARIA 增加了属性和角色，以便给无障碍用户提供更多和更好的信息。
角色
对于多媒体，role 属性极其重要。它可以被用于在屏幕阅读器上说明该元素是视频还是音频。
<video controls role="video" src="example.mp4"></video>
关系
ARIA 定义了很多的关系类型。在多媒体中，我们可以使用 aria-labelledby 属性，这是与一个描述性标签的 id 属性联系起来的。这个描述性的标签可能包括与多媒体相关的任何附加信息。
<div aria-labelledby="videoDescription"> <video controls role="video" src="example.mp4"></video> <p id="videoDescription">A short video about pandas</p> </div>
状态
我们可以使用一些重要的 ARIA 状态与多媒体相关。例如，通过使用 aria-hidden 属性，我们可以将多媒体从屏幕阅读器中隐藏。这对于辅助功能设备较少的用户来说是重要的，因为它们可能不需要识别多媒体。
<video controls role="video" src="example.mp4" aria-hidden="true"></video>
总结
HTML5 和 ARIA 提供很多的技巧来让多媒体拥有更好的可访问性。我们可以添加一些元素（如控制条、描述、替代文本等）以方便用户控制多媒体播放，并使用 ARIA 角色、关系、状态等等来更加精确地为辅助功能或残障用户提供信息。
您可以在自己的多媒体项目中使用这些技术，以确保您的网站是可访问的。要了解更多关于 ARIA 的知识，请参考 ARIA 规范。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----- ---------------
-------
------
----- ----- ----- ----- -----------
---- -----------------------------------
------ -------- ------------ --------------------------
-- ----------------------- ----- ----- ----- ----------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64702694968c7c53b0e49af2