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