Web 无障碍实践是指通过优化设计、HTML 标记和 CSS 样式，让所有用户都能够方便地访问和使用网站的内容，无论是视力障碍、听力障碍，还是其他障碍。而 WAI-ARIA 作为一种让网站更加无障碍的技术规范，在这方面发挥着重要作用。
什么是 WAI-ARIA？
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是 W3C(T在可访问性等工作方面的一个重要规范，它为 Web 开发人员提供了一套标准的语义化标记，用于描述网页的结构、状态和行为。WAI-ARIA 最初是为了解决一个问题而诞生的，那就是当前 Web 应用程序，特别是基于 JavaScript 的应用程序，常常无法与阅读设备、屏幕阅读器等无障碍工具良好地交互。于是 WAI-ARIA 就从这个点出发，提供了一种标准的方式来声明 Web 应用程序的交互方式，从而促进 Web 应用程序无障碍交互。
WAI-ARIA 的作用是什么？
WAI-ARIA 的主要作用是为 Web 开发人员提供一种标准的方式，用于向所有用户，包括那些使用辅助功能的用户展示如何访问和与内容进行交互的信息。例如，盲人用户可以通过屏幕阅读器阅读页面内容，而 WAI-ARIA 的标准可以告诉屏幕阅读器如何理解网页中展示的各种元素，包括按钮、下拉框、列表等等。
WAI-ARIA 规范中包含许多角色、属性、状态，能够帮助开发人员创建可访问和交互性更强的 Web 应用程序。下面我们一起看一些 WAI-ARIA 规范中的基本概念和用法。
WAI-ARIA 的基本概念
WAI-ARIA 规范中包含三个基本概念 ：
角色（Role）：角色定义了用户界面中一个元素的作用。不同角色有着不同的行为和功能。例如，元素可以是一个按钮、文本框、菜单等。WAI-ARIA 规范提供了一套标准角色的定义，使得屏幕阅读器等辅助功能工具可以正确的读取和输出这些元素。
属性（Property）：属性描述了一个角色的某个特征或状态。例如，aria-hidden 属性可以指定一个元素是否对用户隐藏，aria-label 属性可以指定一个元素的名称，aria-selected 属性可以指定一个元素是否被选择。
状态（State）：状态描述了一个角色的特征或状态。例如，aria-pressed 属性可以指定某个按钮的状态是被按下或未按下，aria-disabled 属性可以指定某个元素是否处于禁用状态。状态可以是动态的，例如，当用户输入用户名和密码时，aria-busy 属性可以表示当前正在进行的操作。
WAI-ARIA 的用法
除了了解 WAI-ARIA 规范的基本概念，使用它的语义化标记同样也非常重要。下面我们来看看一些具体用法。
使用 role 属性
role 属性用于为元素指定一个角色，并向屏幕阅读器、无障碍设备等辅助功能工具提供关键信息。下面是一些常用的角色：
- button：用于定义按钮元素的角色
- checkbox：用于定义复选框元素的角色
- combobox：用于定义下拉组合框元素的角色
- menu：用于定义菜单元素的角色
- navigation：用于定义导航元素的角色
- slider：用于定义滑块元素的角色
- spinbutton：用于定义旋钮元素的角色
- tablist：用于定义选项卡元素的角色
<button role="button" aria-label="Search">Search</button>
使用 aria-label、aria-labelledby 和 title 属性
这三个属性用于描述元素的名称、标题等内容。其中，aria-label 和 aria-labelledby 属性通常用于为屏幕阅读器提供元素的名称；title 属性则常常用于为工具提示提供描述。需要注意的是，不要将 title 用于给屏幕阅读器提供名称，因为它不被识别为无障碍标记。
<button role="button" aria-label="Search">Search</button>
<div role="menu" aria-label="Actions">
<a href="#" role="menuitem">Action 1</a>
<a href="#" role="menuitem">Action 2</a>
</div>使用 aria-describedby 属性
aria-describedby 属性用于指定一个或多个描述性文本的 ID，这些文本将在用户与元素交互时被屏幕阅读器等工具读取。比如，可以将一个菜单按钮的描述性文本与菜单本身的描述性文本相关联，以便用户更好地了解菜单的用途，并了解要在菜单中进行哪些选择。
-- -------------------- ---- -------
------- ------------ --------------------
-------------------- ---------------------
---------------- ----- ----------------------------------
----
---------
---- --------- ----------- ------------------
------------------------- ----------------------------
-- ------------- -------- -------------------- -----
-- ------------- -------- -------------------- -----
------
---- ------------------- -------
---- ------- ----- - ------- -- --------
------
---- ------------- -------
--- ---- -------- - ---- -- ------- -- ------ -----
------使用 aria-haspopup 和 aria-controls 属性
aria-haspopup 和 aria-controls 属性用于表示一个元素可以打开一个其它元素，在无障碍设备上，它们指示屏幕阅读器如何处理这两种元素之间的关系。例如，aria-haspopup 可以指定为 true，来告诉屏幕阅读器元素将打开新的元素，而 aria-controls 属性用于指定将要打开的元素。
-- -------------------- ---- -------
------- ------------ --------------------
-------------------- ---------------------
---------------- ------
----
---------
---- --------- ----------- -------------------
-- ------------- -------- -------------------- -----
-- ------------- -------- -------------------- -----
------总结
WAI-ARIA 是一个非常重要的无障碍技术规范。通过学习 WAI-ARIA 的基本概念和用法，我们可以更好地创建可访问性更强的 Web 应用程序，帮助用户以更加自然、方便的方式访问和交互网站的内容。
无障碍实践是前端开发中非常重要的一门技术，尤其是在考虑到更多的人类群体会访问我们的网站时。希望本文能够让大家对 WAI-ARIA 技术更加了解，并指导大家在 Web 无障碍实践上有所收获！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64deec0ef6b2d6eab3a12a83