随着互联网的普及，越来越多的人实现了在线购物、在线阅读、在线学习等各种在线活动。然而，对于一些视力、听力或者其他方面有障碍的用户，可能会无法像普通用户一样顺畅地进行这些活动。为了解决这些问题，无障碍(Accessibility)技术应运而生，ARA(Role)规范便是其中之一。
什么是 ARIA 规范
ARIA 规范是一个可以帮助开发者向无障碍用户传达更准确的信息，从而让无障碍用户更好的理解内容和使用网站的一种方式。ARIA 规范为开发者提供了一种描述 HTML 和 XML 文件中的各个角色和状态的方法，其中有一些关键概念：
- 角色(Role)
- 定义当前元素在页面中扮演的角色。
- 状态(State)
- 描述当前元素的交互操作状态。
- 属性(Property)
- 描述当前元素的一些额外信息。
通过 ARIA 规范的介绍，我们可以发现，ARIA 规范实际上是为网页体验不是很友好的视觉障碍用户设计的。而我们在构建网站时需要考虑的一个因素就是是否为所有用户提供良好的访问体验。
基于 ARIA 的无障碍构建方案
- 用语义化标签
- 明确地添加角色
- 添加状态和属性
以一个 PC 端的导航菜单为例，我们可以按照以下三个步骤进行构建：
用语义化标签
对于导航菜单这个业务场景，我们需要采用语义化标签进行构建，在 HTML5 中，我们可以使用以下标签进行构建：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>明确地添加角色
为了设置导航菜单的角色，我们需要使用 ARIA 规范 声明 Role 属性。因为导航菜单本身是一个菜单列表，所以我们需要设置它的 role 属性的值为 navigation，同时对于菜单列表、菜单项，我们也需要一个一个地进行设置，如下所示：
<nav role="navigation">
<ul role="menubar">
<li role="none presentation"><a href="#" role="menuitem">Home</a></li>
<li role="none presentation"><a href="#" role="menuitem">Products</a></li>
<li role="none presentation"><a href="#" role="menuitem">About Us</a></li>
</ul>
</nav>添加状态和属性
考虑到用户交互，我们需要为元素添加行为和状态，使用户了解菜单项是活动状态、菜单是否展开等，例如 focus、hover 等。ARIA 通常有一些 States、Properties、Attributes 等，用于表明当前控件的作用、状态等，具体如下：
aria-activedescendant- 当用户在控件上时，会通过此属性标明所选项的唯一 ID；当某个选项被选中时，此属性也会被设置为所选项的 ID。
aria-disabled- 控制组件是否可用。
aria-expanded- 标记控件是否展开。
aria-haspopup- 表示控件是否有相关的二级控件。
aria-hidden- 设置元素是否应该被屏幕阅读器忽略。
在导航菜单中，一个用户根据当前鼠标或键盘的操作，总是去访问其中的某一个菜单项，所以我们在这个场景下，需要设置三个属性：
<nav role="navigation">
<ul role="menubar">
<li role="none presentation"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Home</a></li>
<li role="none presentation"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false">Products</a></li>
<li role="none presentation"><a href="#" role="menuitem" aria-haspopup="false" aria-expanded="false">About Us</a></li>
</ul>
</nav>总结
本文介绍了基于 ARIA 的无障碍构建方案，以及如何在具体业务场景中，通过正确的语义化 HTML 标签，添加角色和属性，从而为视觉障碍用户提供更好的访问体验。同时，我们也意识到了在构建一个良好的网页时，我们应该多方面着手，不仅要关注美观性和交互体验，还应该关注所有用户的正常使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65028c9795b1f8cacdfcf810