增强无障碍性：利用 WAI-ARIA 给你的网站添加语义-JavaScript中文网-JavaScript教程资源分享门户

在当今数字化的时代，网站已成为人们获取信息的主要途径。然而，网站的用户涵盖了各种各样的人群，包括有视力、听力、移动和认知障碍的人士。因此，让你的网站对所有人都包容和无障碍是非常重要的。在本文中，我们将介绍 WAI-ARIA 技术，它可以帮助你向网站添加意义，并增强网站的无障碍性。

什么是 WAI-ARIA？

WAI-ARIA，即 Web Accessibility Initiative - Accessible Rich Internet Applications，是一种网络辅助技术的规范，旨在通过向 HTML、CSS 和 JavaScript 中添加语义，提高应用程序的可访问性。

WAI-ARIA 技术可以帮助开发人员创建可访问的、交互式的 Web 应用程序，使其可以更轻松地被屏幕阅读器、语音技术和其他辅助技术解释和运用。

WAI-ARIA 如何增强无障碍性？

WAI-ARIA 技术非常适用于那些不太容易被机器和屏幕识别的交互式组件，如下拉菜单、弹出框和活动指示器等。通过 WAI-ARIA 技术，我们可以简单而明确地告诉机器它们是什么，以及如何和它们交互。

添加角色

WAI-ARIA 角色告诉机器元素的类型或作用。例如，如果您有一个正在修改的表单，您可以将其设置为 role="dialog"，告诉机器它是一个对话框。下面是一个例子：

<form role="dialog">
  <input type="text" name="example" required>
  <button>Submit</button>
</form>

添加属性

属性是到角色的更细致的说明，告诉机器有关元素的其他特征。例如，在一个下拉菜单中，您可以使用 aria-expanded="true" or aria-expanded="false" 告诉屏幕阅读器当前该菜单是展开还是折叠的。下面是一些简单的示例：

<button aria-controls="dropdown" aria-expanded="false">Toggle Dropdown Menu</button>
<ul id="dropdown" role="menu" aria-labelledby="dropdown-button" aria-hidden="true">
  <li role="menuitem"><a href="#">Menu Item 1</a></li>
  <li role="menuitem"><a href="#">Menu Item 2</a></li>
  <li role="menuitem"><a href="#">Menu Item 3</a></li>
</ul>

添加状态

状态将元素的变化告诉机器，例如，标记已选中的复选框或在加载时告诉屏幕阅读器特定元素正在为您加载。下面是一个在加载时使用的例子：

<div role="status">
  <p>Loading...</p>
</div>

总结

WAI-ARIA 技术可以很容易地增强您的网站的无障碍性。通过为交互式组件添加角色、属性和状态，您可以更容易地让机器和屏幕阅读器理解，并且让所有人都能接触到您的网站，包括有视力、听力、移动和认知障碍的人士。

参考链接

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64e71f28f6b2d6eab327c271