在现代 Web 设计中，无障碍设计已经成为一个非常重要的话题。它的目标是让 Web 网站和应用程序能够让所有用户都能够访问，并且能够让他们在使用过程中拥有相同的体验。这涉及到许多方面，其中重要的一点是滚动条控制器的设计。在这篇文章中，我们将深入探讨如何实现无障碍设计下的滚动条控制器，包括以下方面：
- 理解无障碍设计
- 设计无障碍 Friendly 滚动条控制器
- 实现示例代码
理解无障碍设计
无障碍设计是让所有的用户都能够访问同样的信息，这意味着即使是盲人、聋人、残障人士能够同样的访问网络数据，包括文字、图片和多媒体文件。无障碍设计关注的是如何最大限度地提高 Web 网站和应用程序的可访问性和可用性，同时减少人们在使用过程中的不便。
现代操作系统和浏览器为无障碍设计提供了非常好的基础，包括支持键盘的导航、文字对话框、大字体等。然而，这些工具并不足以解决所有问题。在无障碍滚动条控制器的设计中，我们需要有一些附加的技术。
设计无障碍 Friendly 滚动条控制器
在无障碍设计下，滚动条控制器成为了必须要关注的一个问题。首先，我们需要在设计中考虑到需要同时满足两个目标：1）提供良好的可见性和可操作性；2）确保良好的可读性，以便于辅助技术（如屏幕阅读器）能够正确识别。
下面是我们实现无障碍设计下的滚动条控制器所需要考虑的一些关键方面：
1. 显示形态上的考虑
- 需要使用明显、醒目的颜色以及高对比度的配色方案；
- 需要使用大字体，并且文字清晰易读；
- 需要在 CSS 中包括隐藏滚动条的周围区域，并在更改/滚动时使其变得可见；
- 需要在进度条上使用较大的背景，以帮助用户准确度量滚动条位置；
2. 操作界面上的考虑
- 为所有操作提供键盘支持；
- 为所有元素提供交互支持，例如鼠标移入、悬停、点击等；
- 确保触发变化（例如滚动/停止滚动）的目标元素具有足够的大小；
- 确保不透明度适当地透出到透明区域（当使用自定义滚动条时）；
3. 辅助技术上的考虑
- 在 HTML 中使用正确的语义元素；
- 确保每个控制组件都有对应的 ARIA-role；
- 之后根据两个标准（ARIA 和 AXE）来创建滚动条控制器；
- 应为身体元素分配 tabindex="0"，以增加键盘可访问性；
- 优先使用对象拆分而不是对象组，因为对象拆分允许更好的键盘访问；
实现示例代码
我们将通过下面的代码来实现一个无障碍设计下的滚动条控制器。
HTML
-- -------------------- ---- ------- ---- ------------------------- ---- --------------------------- --- ----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- ---- -- ------- -- -- ------- ---------- ---- ------ ---- ----------------- ----------------- ---- ------------- ------------------- ------ ------展开代码
CSS
-- -------------------- ---- ------- ----------------- - --------- ------- --------- --------- - ------------------- - ------- ----- --------- ----- - ---------- - --------- --------- ---- -- ------ -- ------- ----- ------ ----- ----------------- ----- -------- -- ----------- ------- ---- ----- - ----------------- ----------------------- - -------- -- - ------ - --------- --------- ---- -- ----- -- ------ --------- - ----- ----------------- ----- ------- ----- -------------- ----- ----------- - --- --- ------- -- -- ----- ----- - --- --- --------- ---- ---- ----- ----------- --------- ---- ----- ---------- ---- ----- ----------------- ------- - ------------- ------------ - ---------- ------------ ----------- - --- --- ------- -- -- ----- ----- - --- --- --------- ---- ---- ----- -展开代码
JavaScript
-- -------------------- ---- ------- --- --------- - ------------------------------------- --- ----- - ---------------------------------- --- ------- - ---------------------------------------------- ----------------------------------- --------------- - ----------------------- --- ----- - -------------- ---------------------------------- -------- ---------------- - --- ----- - ------------- - ------ --- --------- - -------------------- - --------------------- ----------------- -- ----- - --------- - ----------------------- ----- - -------------- - -------- -------------- - ------------------------------------- ----------------------------------------- ----------- --------------------------------------- --------- - -------------------------------------- ----------- ------------------------------------ --------- --- ---------------------------------- --------------- - --- --------- - -------------------- - --------------------- --- --- - ----------------- - ---------------------- - ---------- --------------------- - ----------------------- ---展开代码
以上就是我们实现无障碍设计下的滚动条控制器的单页应用程序的全部代码。总之，无障碍设计是在所有网站和应用程序中推广使用的一个重要设计技术。通过简单的技术改变，我们可以使接口更加友好和可访问，并在所有用户中产生更好的印象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c44c1c6e1fc40e36d30df9
