随着数字化时代的到来，越来越多的人使用互联网进行日常生活中的事务。然而，对于一些身体残疾或认知障碍的人来说，使用网站或应用程序可能是一个挑战。 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 是一个为了让网站或应用程序能够更加无障碍的开源技术，通过引入ARIA属性和角色来改善网页的可访问性。
ARIA是什么？
ARIA是一种为了改善可访问性的技术，它通过在HTML元素中添加特定的属性和角色，以便更好地描述这些元素，使得网站可访问性增强。
ARIA最初由W3C创建，WAI (Web Accessibility Initiative) 在全球范围内推广，以便让开发者更易于创建可访问的应用程序和网站。
ARIA属性主要针对大部分屏幕阅读器拥有的无法识别的内容，在添加了ARIA属性后，屏幕阅读器能更精准地理解文档结构，使得网页可访问性得到改善。
ARIA属性
ARIA属性是为给HTML元素添加特定的描述信息准备的，我们可以使用它们来指示给定元素的特定用途。 ARIA属性与CSS的class或id不同，它们与HTML标签语义概念不同，ARIA属性是关于如何理解和交互特定元素的附加信息。
下面列举了一些常用的ARIA属性：
role
设置元素角色，ARIA规范提供了很多元素角色，因此使用它们来更准确地描述 HTML元素。
<div role="menu"> <div role="menuitem">菜单项1</div> <div role="menuitem">菜单项2</div> <div role="menuitem">菜单项3</div> </div>
aria-label
使用文字为用户提供元素的描述，它是给元素添加文本标签的首选属性。
<button aria-label="添加任务">添加</button>
aria-labelledby
使用已经存在的元素ID引用来描述组件，它使用文本标签的方式为元素提供描述。
<div id="heading">任务列表</div> <ul aria-labelledby="heading"> <li>任务1</li> <li>任务2</li> <li>任务3</li> </ul>
aria-describedby
使用已经存在元素ID引用来描述元素，它使用文本标签的方式为元素提供描述。
<button aria-describedby="btn-desc">点击提交</button> <div id="btn-desc">这是一个按钮，用于提交表单</div>
最佳实践
ARIA属性让为可访问性开发提供了一种有益的技术，然而ARIA使用也需要一些最佳实践：
ARIA应该作为一种辅助技术，而不应该被认为是必需品。那些能够使用标准HTML标签及DOM结构进行设计的项目应该优先使用。
保持ARIA语义明确，使用角色属性与其他通用属性一起。例如，按钮应该使用
role=“button”而不是role=“link”。定期评估和测试你的网站，以确保它们得到良好的可访问性。为了让测试更加准确，可以使用浏览器扩展例如axe或aXe-core。
代码示例
在以下代码示例中，我们将使用ARIA属性来增加表格的可访问性。
在HTML中，通常我们使用<table>标签来创建表格，但是这将为网站可访问性带来巨大的挑战。因此，我们将使用一些ARIA属性来增强这个表格的可访问性。
-- -------------------- ---- -------
------ --------------
-------
----
-----------
-----------
-----------
-----
--------
------ ----------------
--- -----------
--- --------------- -----------------------
--- --------------- -----------------------
--- --------------- -------------------
-----
--- -----------
--- --------------- -----------------------
--- --------------- -------------------------
--- --------------- ------------------
-----
--------
--------在上述示例中，我们为表格中的每个单元格添加了ARIA role=“cell”属性。此外，我们还在表格主体元素（<tbody>）之上添加了role=“rowgroup”属性，并在每行上添加了role=“row”属性。
我们还使用data-label属性为单元格提供标签，以提高网页的可访问性。
结论
ARIA属性是一个非常有用的工具，它可以极大地提高网站和应用程序的可访问性，使得身体残疾和认知障碍的用户更加轻松地使用网站和应用程序。当您设计的网站需要提供更好的可访问性时，请考虑使用ARIA属性来实现这一目标，并记住最佳实践。
THANK YOU! > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/66efb13b6fbf9601973082b5) ，转载请注明来源 [https://www.javascriptcn.com/post/66efb13b6fbf9601973082b5](https://www.javascriptcn.com/post/66efb13b6fbf9601973082b5)