WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 角色属性是一种为 HTML 元素添加语义信息的标准。它可以帮助实现网页的无障碍性，让视力、听力或身体上有障碍的用户能够更好地访问网页内容和交互操作，提高网站的可访问性和易用性。本文将介绍 WAI-ARIA 角色属性的基本概念、应用方式以及实现无障碍的指导意义。
WAI-ARIA 角色属性的基本概念
WAI-ARIA 角色属性是为了补充 HTML 语义化标签而设计的，它有三个核心概念：
- 角色（role）：表示 HTML 元素的作用和功能，如按钮、菜单、表格、提示框等；
- 状态（state）：表示 HTML 元素当前的状态，如已选中、已展开、已禁用等；
- 属性（property）：表示 HTML 元素的其他属性，如标题、描述、值等。
通常情况下，WAI-ARIA 角色属性是与 HTML 元素的 class 属性结合使用，例如：
<button class="btn" role="button" aria-disabled="true" aria-label="提交">提交</button>
- class="btn"：为按钮元素添加基础样式
- role="button"：明确该元素的角色为按钮类型
- aria-disabled="true"：设置按钮不可用状态
- aria-label="提交"：给按钮添加描述标签，方便屏幕阅读器用户理解它的作用
WAI-ARIA 角色属性的应用方式
一般来说，WAI-ARIA 角色属性要在 HTML 元素的最外层标签中进行设置。根据需要，还可以设置其他的状态和属性，如下所示：
<div class="dialog" role="dialog" aria-labelledby="dialog-title" aria-modal="true" tabindex="-1"> <h2 id="dialog-title">这是一个弹出框</h2> <p>这是一个弹出框的内容</p> <button class="btn" type="button" aria-label="关闭弹出框">×</button> </div>
- role="dialog"：将 div 元素标记为对话框
- aria-labelledby="dialog-title"：设置对话框的标题，id 为 "dialog-title" 的元素
- aria-modal="true"：设置对话框为模态框，即阻止后面的内容交互
- tabindex="-1"：设置 div 元素为可聚焦元素，使其能够响应键盘焦点
WAI-ARIA 角色属性的指导意义
通过使用 WAI-ARIA 角色属性，我们可以为用户提供更好的访问体验：
- 提高可访问性：使用无障碍功能，符合 WCAG 2.0 标准；
- 提高可用性：为用户提供更多的交互方式，增加了灵活性；
- 提高可维护性和可扩展性：在不改变 HTML 结构和样式的情况下，增添无障碍特征。
示例代码
以下是一个 WAI-ARIA 角色属性应用的示例，实现了一个有序列表，其中每个列表项可以折叠展开。当列表项聚焦时，会出现键盘焦点线标记。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ---------------
-------
----- -
----------- -----
------- --
-------- --
-
----------- -
--------- ---------
-------------- -----
------------- -------
-
------------------- -
-------- ---
-------- ------
--------- ---------
---- -------
----- --
------ -----
------- -------
-------------- --- ----- -----
----------------- ------ -------
---------- -------------
----------- --------- ---- ---------
-
----------------------------------------- -
---------- --------------
-
------------------------- -
-------- --- ----- -----
-
------------------ -
------- --------
-
-------------------- -
------- --
-------- --
-
--------
-------
------
--- -------------
--- ------------------ --------------- ------------ ----------------------
--- ------------------------- ------------- ---------------------------------------
--- --------------------------- ------------------ -------
--------------
--------------
-----
-----
--- ------------------ --------------- ------------ ----------------------
--- ------------------------- ------------- ---------------------------------------
--- --------------------------- ------------------ -------
--------------
--------------
-----
-----
--- ------------------ --------------- ------------ ----------------------
--- ------------------------- ------------- ---------------------------------------
--- --------------------------- ------------------ -------
--------------
--------------
-----
-----
-----
--------
----- --------- - -----------------------------------------
------------------------ -- -
----- ----- - -----------------------------------------
----- --------- - ------------------------------------
----- ------- - ----------------------------------------
------------------------------- -- -- -
----- -------- - ----------------------------------- --- ------ -- ------
----------------------------------- -----------
-------------- - ----------------
---
---
---------
-------
-------结论
WAI-ARIA 角色属性是一种非常有用而且易于实现的无障碍技术。它可以提高网页的可访问性和易用性，同时也能够增强网页的可维护性和可扩展性。在开发前端应用程序时，不妨考虑加入 WAI-ARIA 角色属性标准，让您的应用程序更加友好和易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67287de12e7021665e206d86