当我们在开发 Web 应用时，我们需要确保我们的应用对于残障人士也是友好的。这样我们可以为所有用户提供平等的使用体验。这就是无障碍性（Accessibility）的概念。ARIA（Accessible Rich Internet Applications）是实现无障碍性的有力工具之一。
在本文中，我们将学习如何使用 ARIA 属性来实现无障碍性。我们将深入探讨支持键盘和屏幕阅读器访问的实现方式，并且通过示例代码来演示其使用。
支持键盘访问
当我们考虑无障碍性时，我们需要确保我们的应用可通过键盘操作。这是因为有些残障人士使用屏幕阅读器，他们无法使用鼠标来操作应用。我们需要让应用可以通过键盘操作。下面是一些示例代码：
<div role="button" tabindex="0" aria-label="点击我" onclick="alert('Hello!')">点击我</div>在这个例子中，我们使用一个 <div> 元素来模拟一个按钮。我们为其设置 role 属性来告诉屏幕阅读器此元素作为按钮使用。我们对它设置了 tabindex 属性来设置元素顺序。键盘导航将按照 tabindex 属性值的顺序移动。
我们还使用了 aria-label 属性来为屏幕阅读器提供更好的上下文信息。在本例中，我们指定“点击我”作为按钮的标签。
我们使用 onclick 事件来添加按钮的交互，当用户点击该按钮时会触发 alert() 函数。如果需要使用键盘点击按钮，我们可以按下 Enter 或 Space 按钮。
支持屏幕阅读器访问
屏幕阅读器是一种软件，其能够将屏幕上的文本转换成语音或者展示在盲文显示器上。当我们考虑无障碍性时，我们需要确保屏幕阅读器能够正确地读取我们的应用的内容。我们可以使用 ARIA 属性来为屏幕阅读器提供更好的上下文信息。
相关 ARIA 属性的使用
aria-hidden
该属性用于告诉屏幕阅读器是否隐藏了某个元素。当该属性是 true 时，将不会在屏幕阅读器中出现。
<div aria-hidden="true">这里的文本不会被屏幕阅读器阅读</div>
aria-labelledby
该属性用于指定当前元素的标签 ID，该 ID 的元素包含了能够更好地描述当前元素内容的文本。这是在当前元素没有一个合适 alt 或 aria-label 元素的情况下使用的。
<div id="label">这是一个描述内容的文本</div> <img src="image.png" aria-labelledby="label">
aria-describedby
该属性与 aria-labelledby 相似，不同之处在于该属性链接到的 ID 元素通常是目前不存在于文档流中的。它通常用于描述性内容，如工具提示和关于页面区域的追加信息。
<div id="tip">这是一个说明用途的文本</div> <button aria-describedby="tip">这是一个工具提示</button>
示例
下面是一个包含上述三种 ARIA 属性的例子。在这个例子中，我们将 <div> 元素用作导航菜单，当用户使用键盘或鼠标悬停时将打开该菜单。
-- -------------------- ---- -------
-----
------- -------------------- -------------------- ---------------------
------------------------- ------------------------------
--
---------
--- --------- ------------
--- ----------------
-- ----------------
-----
--- ----------------
-- ----------------
-----
-----
------我们首先将 <button> 元素设置为菜单，使用 aria-haspopup 属性告诉屏幕阅读器此按钮有一个下拉菜单。使用 aria-controls 属性将下拉菜单与此按钮相关联。
当菜单打开时，我们可以通过设置 aria-expanded 属性来改变按钮的状态。当菜单关闭时，该属性应为 false。
当用户鼠标悬停在此按钮上时，onmouseenter 事件将被触发，并且菜单将被打开。onkeydown 事件将监听用户按下 Space 和 Enter 按钮，并打开或关闭菜单。这里使用了 event.preventDefault() 函数来防止浏览器默认行为。
对于菜单项，我们使用了 role="menuitem" 和 <ul> 元素的 role="menu" 来告诉屏幕阅读器这是一个菜单项。我们还使用 <a> 元素表示链接，在 role="menuitem" 中引用此元素。这通过使用 aria-labelledby 属性进行链接。
这个例子可以作为一个起点，我们可以根据实际情况来使用 ARIA 属性。我们可以使用 ARIA 属性来改变设备和用户体验之间的差异，提供平等的用户体验。
结论
在本文中，我们学习了如何使用 ARIA 属性来提供无障碍性。我们深入探讨了支持键盘和屏幕阅读器访问的实现方式，并且提供了示例代码。
ARIA 作为一个强大的无障碍性工具，它可以让我们的应用更加通用，无论使用什么设备，都能够为用户提供平等的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673072d6eedcc8a97c91f1ac