什么是 ARIA？
ARIA 全称为 Accessible Rich Internet Applications，是一种定义了丰富交互应用程序的辅助功能标准。
ARIA 的目标是使得 Web 应用程序尽可能具有可访问性。通过实现 ARIA 标准，能够为访问设施较差的用户提供无障碍的 Web 体验。这些可以是使用屏幕阅读器的人群、使用语音识别的用户、缺少双臂或手的人群、老年人等等。
ARIA 标准
ARIA 定义了一组角色、属性和状态，有助于使 HTML 和 JavaScript 创建的交互变得可访问。ARIA 引入了新的角色：widget、application、composite widget、document等。 role 属性指定它们之间的关系，具有内置的可访问性属性，如 aria-*。 ARIA 角色可使可使用屏幕阅读器的用户了解控件以及执行的操作，还可以提供足够的信息来激活交互。
角色
ARIA 角色描述了元素在 Web 内容中的作用。ARIA 角色包含两种不同的角色类型，通用角色和特定角色。通用角色可以用于各种场景，如按钮、列表和文本框等。而特定角色则是更具体的目标，可以用于描述复合控件的角色、资料表格和树视图等。
属性
ARIA 属性用于为提高无障碍应用程序的可访问性提供帮助。ARIA 定义了一组属性，它们可以描述 HTML 元素的不同方面。这些属性中包括状态属性，用于指定元素的活动状态；可访问性属性，用于指定元素的可访问性信息；描述属性，用于指定元素的其他特征，如输入字符数。
状态
ARIA 状态是反映应用程序状态的布尔属性。状态类型包括可访问性状态，生存期状态和关键性状态。通过应用 ARIA 状态，可以告诉用户选项是开或关或滑动或其他状态。
在无障碍中的应用
在无障碍开发中，ARIA 至关重要。它使得我们能够提高 Web 应用程序和网站的可访问性，从而使其可以被广泛使用。以下是一些示例，说明如何使用 ARIA 改善可访问性。
改进表格的可访问性
表格是 Web 页面中用于呈现数据的一种强有力的工具。然而，由于表格的层次结构较为复杂，并且表格缺少结构明晰的标准方法，因此表格的可访问性一直是无障碍问题中的难点。ARIA 可以使用 role 属性和 aria- 属性改进表格的可访问性。
-- -------------------- ---- -------
------ --------------------
-------
----
--- ----------------------
--- ---------------------
--- ----------------------
-----
--------
-------
----
-------- ------------------ ------------ -- -------
----------- ------
---------------
-----
----
-------- ------------------ ------------ -- -------
----------- ------
---------------
-----
----
-------- ------------------ ------------ -- -------
----------- ------
---------------
-----
--------
--------在表格示例中，我们使用 role 属性告诉屏幕阅读器这是一个展示表格，而不是数据表格。使用 scope 属性可以告诉屏幕阅读器每个表头单元格对应的数据单元格。
改进表单控件的可访问性
表单是创建用户与网站互动的关键元素。当表单被完成时，信息将被收集和传输。ARIA 可以帮助我们将表单控件和相关标签和状态联系起来，从而使表单更加可访问。
-- -------------------- ---- ------- ------ ------ ----------------------------- ------ ----------- -------------- -------------------- -- ------ ------------------------------- ------ ------------ --------------- -------------------- -- ------ ----------------------------------- ------ ----------- ----------------- -- ------- ----------------------------- -------
在表单示例中，我们使用 aria-required 属性告诉屏幕阅读器这些表单字段是必填的。
总结
ARIA 是 Web 开发中非常重要的一个标准，在提高 Web 应用程序的可访问性方面起着至关重要的作用。当我们理解和实施 ARIA 角色、属性和状态时，我们可以帮助我们创建更加可访问的 Web 应用程序，为访问设施较差的人们提供更好的服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dec393f6b2d6eab39e3060