如何使用 ARIA 标准完善无障碍用户体验-JavaScript中文网-JavaScript教程资源分享门户

随着Web技术的不断发展，越来越多的人开始使用互联网来获取信息、进行交流和购物等行为。然而，仍然有很多人受到视觉、听觉、认知和身体等方面的障碍，这些障碍导致他们难以访问网站并获取所需信息。这就是无障碍性问题需要解决的。

ARIA（Accessible Rich Internet Applications）是一种用于实现无障碍Web应用程序的技术规范。通过使用ARIA，开发者可以使用标准HTML和JavaScript，为读屏软件和辅助技术提供更多的信息，以便用户能够获取到更多的内容。

本文将介绍如何使用ARIA规范来完善无障碍用户体验。我们将介绍ARIA规范的角色、状态和属性，并提供一些示例代码作为参考。

ARIA规范的角色、状态和属性

角色（Role）

角色是ARIA规范中定义的一种对象类型，用于描述HTML元素在应用程序中的作用和功能。每个HTML元素都有一个默认角色，但在某些情况下，需要为元素指定一个新的角色以改变其功能。以下是一些角色示例：

button：表示一个按钮
link：表示一个链接
dialog：表示对话框
alert：表示一个警告提示信息
combobox：表示一个下拉选择框

为了修改元素的角色，使用"role"属性。例如，下面的代码将一个div元素的角色修改为"button"：

<div role="button">Click me!</div>

状态（State）

状态描述了HTML元素的属性或状态，可以被读屏软件或辅助技术轮询，并向用户发送相关信息。以下是一些状态示例：

aria-checked：表示一个复选框或单选按钮是否被选中
aria-disabled：表示一个元素是否被禁用
aria-hidden：表示一个元素是否应被屏幕阅读器忽略

为了设置元素的状态，使用"aria-"前缀的属性。例如，下面的代码将一个按钮元素的状态修改为"disabled"：

<button aria-disabled="true">Click me!</button>

属性（Property）

属性是ARIA规范中定义的一种对象类型，用于描述HTML元素在应用程序中的属性和状态。每个属性都有一个关联的值，可以被读屏软件或辅助技术轮询，并向用户发送相关信息。以下是一些属性示例：

aria-label：表示一个元素的文本标签
aria-valuemin：表示一个元素的最小值（在滑块控件中使用）
aria-valuemax：表示一个元素的最大值（在滑块控件中使用）
aria-valuenow：表示一个元素的当前值（在滑块控件中使用）

为了设置元素的属性，使用"aria-"前缀的属性。例如，下面的代码将一个滑块元素的属性修改为最小值为0，最大值为100，当前值为50：

<input type="range" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">

如何使用ARIA规范来完善无障碍用户体验

下面以一个可伸缩列表为例，介绍如何使用ARIA规范来完善无障碍用户体验。

确定角色和状态。对于列表和列表项元素，我们将使用"role"属性来指定它们的角色，即"list"和"listitem"。对于可伸缩列表，我们将使用"aria-expanded"属性来表示它是否展开。

<ul role="list">
  <li role="listitem" aria-expanded="false">Item 1</li>
  <li role="listitem" aria-expanded="false">Item 2</li>
  <li role="listitem" aria-expanded="false">Item 3</li>
</ul>

绑定事件。用户点击列表项时，我们需要使用JavaScript来展开或收起子项。在处理点击事件的函数中，我们将设置"aria-expanded"属性。

var listItems = document.querySelectorAll('[role="listitem"]');
for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', function() {
    var expanded = this.getAttribute('aria-expanded') === 'true' || false;
    this.setAttribute('aria-expanded', !expanded);
  });
}

提供可访问的名称。我们需要为每个列表项提供语义上的名称，以便读屏软件和辅助技术能够正确地读出它们。可以使用"aria-label"或"aria-labelledby"属性来提供此名称。

<ul role="list">
  <li role="listitem" aria-expanded="false" aria-label="Expand item 1">Item 1</li>
  <li role="listitem" aria-expanded="false" aria-labelledby="item2">Item 2</li>
  <li role="listitem" aria-expanded="false" aria-labelledby="item3">Item 3</li>
</ul>

在本示例中，我们使用了"aria-labelledby"属性来引用一个“id”为“item2”或“item3”的元素，这些元素包含了语义上的名称。

使用无障碍标准HTML语法。在编写HTML时，我们应该优先使用HTML5和无障碍标准的语法。例如，不要使用"div"元素来模拟按钮或链接，而应使用实际的"button"或"a"元素，并使用ARIA属性来定义它们的角色和状态。

完整的示例代码如下：

-- -------------------- ---- -------
--- ------------
  --- --------------- --------------------- ------------------ ---- ------- ------
  --- --------------- --------------------- ---------------------------- ------
  --- --------------- --------------------- ---------------------------- ------
-----

--------
--- --------- - -----------------------------------------------
--- ---- - - -- - - ----------------- ---- -
  -------------------------------------- ---------- -
    --- -------- - ---------------------------------- --- ------ -- ------
    ---------------------------------- -----------
  ---
-
---------

总结

使用ARIA规范可以帮助开发者实现无障碍用户体验。在编写HTML和JavaScript代码时，我们应该根据需要为各元素定义角色、状态和属性，并提供可访问的名称。尽可能使用无障碍标准HTML语法以确保最佳可访问性。对于本文所介绍的示例，我们可以在任何Web应用程序中都应用这些技术，以便更多的人能够访问我们的网站并获取所需信息。

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