随着人们对无障碍体验的关注度不断提高，许多开发者开始在他们的前端应用程序中实现辅助功能。其中，对于音量控制，增加或减少音量不仅是一项常见的操作，也是一种有用的辅助功能，可以帮助用户更好地理解音频内容。
在本文中，我们将讨论如何在无障碍模式下，为您的音量控制添加辅助功能。我们将探讨一些用户使用辅助技术时可能遇到的挑战，以及如何克服这些挑战来提高用户的无障碍体验。
从用户的角度出发
在开始编写代码之前，我们需要了解一下有哪些用户可能会受到此功能的帮助。
视障用户
对于视障用户，如何增加或减少音量可以使用语音辅助功能或者屏幕阅读器来实现。因此，我们需要为他们提供可言描述的控制选项，这将使得语音控制更方便。
聋哑用户
对于聋哑用户，我们需要提供可见的控制选项。这可以通过图标或符号来实现。
操作受限用户
一些用户可能有行动不便，如业务、永久性或临时性的残疾，可能需要辅助设备来操作音量控制器。因此，我们需要为他们提供易于操作的可访问控制。
开始实现辅助功能
受众和需求已经很清楚了，现在， 我们可以着手实现辅助功能。我们将使用HTML5, CSS3和JavaScript。在本文中，我们将构建一个包含两个箭头的音量控制器，一个是向上的箭头表示增加音量，另一个是向下的箭头表示减少音量。同时,也会给每个箭头添加相应的辅助功能。
HTML5结构
<div> 元素中被包裹着两个带有 href="#" 锚点的 <a> 元素。每个链接均嵌套到 <span> 元素里, 这是为了更好的控制样式和显示文本。 元素的属性 role="button" 可以告诉屏幕阅读器链接的作用是一个可点击的按钮，而不是一个常规的链接。
---- ------------------------
-- -------- ------------------------------ ---------------------------------- --------------
----- -----------------------------------
---- ---------- - --- ---- ----------- ------------ -------------------
-------- ------------- ------- ------- ------ ------ ------ --
------
----
-- -------- ------------------------------ ---------------------------------- --------------
----- -----------------------------------
---- ---------- - --- ---- ----------- ------------ -------------------
-------- ------------- ------- ------- ------ ------ ------ --
------
----
------CSS3样式
接下来，我们需要为箭头添加样式，并处理键盘交互和焦点状态的样式。 注意：此处使用的样式包括一些现代浏览器才支持的 CSS 属性。但是，你可以使用替代样式，并利用 PostCSS 或 Autoprefixer 来处理 CSS 自动补全。
------------------------ - -------- ------------ ---------------- ------- ------------ ------- ------ ------- ------- ------- ---------- ----- ------------ ---- ----------- ------- ---------------- ----- ------- --- ----- ------ -------------- ---- ----------- --- ----- ----- - ------------------------------ - -------- -- ------------- -------- - ------------------------------- - ---------- ----------- - ------------------------------ - ----------------- -------- ------- -------- - ---------------------------------- - ------------- ------ - --- - ----- ------------- ------ ------- ------- ------- ----------- --- ----- ----- - ----------------------------------------------- ---------------------------------- - ------- ------------ -------- ---- -
JavaScript逻辑
接下来，我们来为箭头添加功能。 我们添加交互：点击箭头就更改音量控制的迷你版本（音量值受到覆盖）中的音量值。 最终，我们要不断改进这些功能来考虑无障碍体验辅助功能的使用。
----- -------------- - -------------------------------------------
----- ---------- - -------------------------------------------------------------------
----- -------- - -------------------------------------------------------------------
----- ----- - --------------------------------------------------------
--- ----------- - ---
--------------- - -----------------
------------------------------------ -- ----- -
-- ------------ ---- -- -
----------- -- ---
--------------- - -----------------
-
---
---------------------------------- -- ----- -
-- ------------ ---- ---- -
----------- -- ---
--------------- - -----------------
-
---添加辅助功能
现在，我们可以开始添加辅助功能了。 由于我们的控件是一个可点击的按钮，因此，我们将使用键盘和屏幕阅读器来共享这一点。 屏幕阅读器使用键盘导航控制GUI操作，可通过使用Tab键选择控制时进入，接着在 GUI 控件内通过使用箭头键 / Enter键与控件交互完成调整音量的操作。
-------------------------------------- ------- ----- -
-- ----------- --- ------- -- ---------- --- -------- -
-----------------------
-- ------------ ---- -- -
----------- -- ---
--------------- - -----------------
-
-
---
------------------------------------ ------- ----- -
-- ----------- --- ------- -- ---------- --- -------- -
-----------------------
-- ------------ ---- ---- -
----------- -- ---
--------------- - -----------------
-
-
---但是，现在我们的箭头被聚焦时，并没有给用户提示“音量已增加”或“音量已降低”等的相关信息。 输入设备也无法获取这些按钮状态通知。 因此，这就意味着我们要向 屏幕阅读器 提供相关的信息。
关于屏幕阅读器比较独特的是它需要一个语义表达套件来阐述相关的信息。 如果使用的语法不是标准化的，则可能会给用户的使用带来一些困难。 在这种情况下，我们需要使用 aria-live 属性上的状态改变来反馈音量的变化
------------------------------------ -- ----- -
-- ------------ ---- -- -
----------- -- ---
--------------- - -----------------
-----------------------
-
---
---------------------------------- -- ----- -
-- ------------ ---- ---- -
----------- -- ---
--------------- - -----------------
-----------------------
-
---
-------- ---------------------- -
----- ------- - ------- -- --- -------------- ---------
----- ---------- - ---------------------------------------
-------------------- - --------
-----------------------------------------------
------------- ----- -
-------------------- - ---
--------------------------------------------
-- ------
-测试您的辅助功能
这是我们可以用来测试我们的辅助功能的一些问题。
- 使用有视力问题的屏幕阅读器用户测试，以确保他们可以成功使用音量控制器，并得到正确的音量状态更新。
- 尝试使用辅助键盘来测试您的音量控制器，以确保它可以使用键盘导航操作。
- 使用不同的浏览器和辅助技术测试您的音量控制器，以确保它能够与这些技术协同工作。
结论
无障碍设计不仅对包含残障人群，对一般人群都有很大益处。良好的无障碍设计意味着页面可以针对不同的用户进行优化，包括使用助听器或屏幕阅读器的人。 音量控制器可以成为辅助技术的一个有用特性，因此它应该是任何音频应用程序中的重要部分。 除了在页面上实现无障碍设计以外，我们应该也让网站的用户自动获取最新的版本，以去除任何低质量的特性和修复任何潜在的固有性缺陷。
示例代码
完整的示例代码可以在下面的 Github 地址获得。
https://github.com/blueedgetechno/a11y-volume-controls
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670fc6405f55128102673ea8