在网站开发过程中，我们通常会考虑用户体验，尽可能地提供最好的页面视觉效果和交互体验，但对于有身体障碍的用户，也需要我们更多地关注和支持，例如听力障碍的用户。 在本文中，我们将讨论如何为他们打造一个无障碍网站。
理解无障碍网站
一个无障碍网站是指所有用户，包括那些有视力、听力、认知和运动障碍，对网站内容的访问和使用体验都没有任何障碍。因此，建立一个无障碍网站是我们的一项社会责任，也是贯彻可持续发展原则的一种基本方式。
为听力有损的用户打造网站
听力有损的用户在访问网站时，由于无法清晰听到声音，会导致无法听到有关网站的重要信息，并可能错过一些其他有用的信息。 以下是为此类用户打造无障碍网站的一些技巧：
1. 提供文字标注或副标题
在视频或音频上，如音频描述，提供文字标题或副标题是非常有必要的。这可以大大提高听力障碍用户的用户体验，因为音频描述能够让他们了解视频或音频的内容，而文字标题或副标题则可以让他们了解主要的信息。
示例代码：
以下是HTML实现的音频元素示例，它包括：音频描述和副标题标签。
<audio controls> <source src="test.ogg" type="audio/ogg"> <source src="test.mp3" type="audio/mpeg"> <track kind="description" src="test-description.vtt" srclang="en" label="English" /> <track kind="subtitles" src="test-subtitles.vtt" srclang="en" label="English" /> Your browser does not support the audio tag. </audio>
2. 将视频/音频绑定到用户可见的界面元素
听力有损的用户可能无法分辨哪个区域含有音频或视频。为提高用户体验，我们可以尝试将音频和视频元素绑定到可见的图标或按钮上，或者设计出带有指定标注的界面元素。
示例代码：
以下是HTML实现的一个视频播放器的示例。它包括：视频视频标题、标题、播放/暂停按钮、时间线和文本字幕。
-- -------------------- ---- -------
---- ------------------------
------ ---------
------- -------------- -----------------
------ ---------------- ------------------------ ------------ --------------- --
----- --- ---------
--------
---- ----------------------- ----------- ---- -- --- -----------
---- ------------------------- --------- ---------------- --------- -------------------
---- -----------------
---- -------------------------------
---- ---------------------
---- -----------------------
------
---- ---------------------------
------
---- -----------------------------
------3. 考虑自定的字幕和音频描述
有时我们不能获得音频描述或字幕的作者授权，或者我们需要提供不同语言的字幕和音频描述，这时我们可以考虑自定义它们：
3.1 使用 WebVTT 格式自定义字幕
WebVTT格式可以应用于广泛的字幕需求。我们可以在视频上制作自定义字幕，以满足不同语言和的用户需求。
<video> <source src="/video.mp4" type="video/mp4"> <track kind="subtitles" src="english.vtt" srclang="en" label="English" default> <track kind="subtitles" src="spanish.vtt" srclang="es" label="Español"> </video>
这里我们创建了两种语言的字幕，分别使用< track >元素并指定kind属性的值为“subtitles”，并将其src属性设置为对应的 WebVTT 文件。 这里的关键属性是“srclang”，它指定了字幕语言的ISO代码。
3.2 使用ARIA描述
ARIA描述是一种用于提供信息的属性，通常在不提供视觉或听觉信息的情况下表达同等的含义。 通过使用ARIA描述，我们可以在需要的地方创建更多的文字描述，以满足所有用户的需求。
<div class="my-class" aria-describedby="id-of-description"> ... </div> <div id="id-of-description" class="sr-only"> A longer description of the above content. </div>
在上面代码中，我们创建了一个CSS类来处理元素外观，并使用ARIA描述添加了另一个div元素。 这个div元素的内容不会被视觉界面显示，但当用户屏幕阅读器检测到需要时，将阅读其内容。
结论
这篇文章给出了一些技巧，如提供文字标注或副标题，在用户可见的界面元素绑定音频和视频，考虑自定字幕和音频描述，以及如何使用ARIA描述等，这些技巧可以为听力有损的用户打造出一个无障碍的网站。我们应该为所有用户设计和开发无障碍网站，并努力让他们获得更多的感知和掌控。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6713b81fad1e889fe20fa2c1