使用 ARIA 属性实现无障碍交互式 UI：如何创建符合标准的交互组件

在现代社会中，许多人都需要使用屏幕阅读器进行网站浏览，因此，无障碍性已经成为了 Web 开发中的一个非常重要的话题。本文将会介绍如何使用 ARIA 属性来创建符合标准的交互组件，以及如何让你的网站变得更加友好。

什么是 ARIA？

ARIA 是 Accessible Rich Internet Applications（可访问的丰富互联网应用程序）的缩写。ARIA 属性是一组针对开发人员，以及网页上的交互式控件和动态内容所提供的标准属性，好让使用辅助技术的人士更容易理解并使用你的网站。

ARIA 属性包含多个角色和属性，包括：

• 角色：定义控件的类型和功能
• 属性：定义控件状态和行为等信息

ARIA 角色和属性的使用方法会被下文所介绍。

为什么使用 ARIA？

如果你要让你的交互组件更容易被使用，那么 ARIA 属性是非常有用的，因为屏幕阅读器和其他辅助技术可以读出角色和属性的定义信息，从而带来更完整的用户体验。

同时，使用 ARIA 属性还能帮助你提高你的网站的可用性，因为这会让你的网站可以被更多种类的用户所使用。

ARIA 的使用类型

ARIA 属性主要分为三种类型，分别是：

• 角色：用于描述控件类型
• 属性：用于描述控件的行为或状态
• 状态：用于描述控件当前的状态

下面将分别以实例的方式来介绍各类型的使用方式。

角色

ARIA 角色是指用于描述 HTML 元素的类型和功能。ARIA 角色可以通过 role 属性来定义。下面是一些常用的 ARIA 角色：

• button：按钮
• checkbox：复选框
• combobox：下拉框
• link：链接
• progressbar：进度条
• slider：滑块
• spinbutton：微调按钮
• tabpanel：选项卡

举个例子，如果你希望一个按钮可以通过键盘来触发，你可以使用 role="button" 来把这个按钮定义为按钮类型。

<div role="button" tabindex="0">
  Click Me
</div>

在这个例子中，我们定义了一个 div 元素，并且通过 role="button" 的方式把这个 div 元素定义为按钮类型，这样屏幕阅读器就可以知道这个元素是一个按钮了。

属性

ARIA 属性是指用于描述控件的行为或状态。下面是一些常用的 ARIA 属性：

• aria-checked：用于描述复选框和单选框的选中状态
• aria-expanded：用于描述折叠面板、菜单和弹出框的展开状态
• aria-haspopup：用于描述菜单、弹出框和下拉框的存在状态等

举个例子，如果你希望一个输入框可以自动完成，你可以使用 aria-autocomplete="list" 来让屏幕阅读器知道这个输入框可以进行自动完成。

<label for="input">Search:</label>
<input type="text" id="input" aria-autocomplete="list" />

在这个例子中，我们定义了一个输入框，并使用 aria-autocomplete="list" 来定义这个输入框的自动完成属性。

状态

ARIA 状态是指用于描述控件当前的状态，包括焦点、无障碍、失效状态等。下面是一些常用的 ARIA 状态：

• aria-pressed：用于描述按钮的按下状态
• aria-disabled：用于描述控件的禁用状态
• aria-expanded：用于描述折叠面板、菜单和弹出框的展开状态等

举个例子，如果你希望一个复选框的状态是被选中的，则可以使用 aria-checked="true" 来描述它的选中状态。

<label for="checkbox">Select me:</label>
<input type="checkbox" id="checkbox" aria-checked="true" />

在这个例子中，我们定义了一个复选框，并使用 aria-checked="true" 来描述它的选中状态。

ARIA 的最佳实践

在使用 ARIA 属性时，需要注意以下几点：

1. 只有真正需要时才使用 ARIA。

ARIA 属性应该只用于那些 HTML 标准无法满足的情况下，而不是用于修复缺陷或误用。

2. 让 ARIA 属性严格符合规范。

ARIA 角色和属性需要遵循严格的规范。如果你定义了一个错误的角色或属性，那么这个控件将无法被屏幕阅读器正确地处理。

3. 始终保持独立性。

在使用 ARIA 属性时，应尽可能独立地定义它们。这意味着你应该避免使用嵌套在其他 ARIA 属性之中，或者与其他 ARIA 属性冲突的 ARIA 属性。

4. 使用标准组件，快速实现无障碍。

在实现界面交互时，尽可能地使用标准组件，例如 HTML5 元素和表单控件。标准组件通常已经默认包含了足够的无障碍信息。

5. 提供足够的无障碍信息。

提供足够的无障碍信息可以帮助屏幕阅读器读出正确的信息，并对网站操作做出正确的反应。例如，对于一个弹出框，在展开时应该给予足够的无障碍信息来告诉屏幕阅读器它所包含的内容。

实例：如何为表格添加无障碍属性

表格是在 Web 开发中经常使用的元素之一，通过以下实例来介绍如何为表格添加无障碍属性。

第一步：添加 role="table"。

// javascriptcn.com code example
<table role="table">
  <caption>Monthly expenses</caption>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Rent</th>
      <td>$800</td>
    </tr>
    <tr>
      <th scope="row">Utilities</th>
      <td>$150</td>
    </tr>
    <tr>
      <th scope="row">Groceries</th>
      <td>$200</td>
    </tr>
  </tbody>
</table>

这个例子中，我们添加了 role="table" 属性来告诉屏幕阅读器这是一个表格元素。

第二步：定义 th 元素的 scope 属性。

  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Cost</th>
    </tr>
  </thead>

这个例子中，我们使用 scope 属性来告诉屏幕阅读器这个 th 元素的作用是列标题。

第三步：为 td 元素添加 aria-labelledby 属性。

// javascriptcn.com code example
<tbody>
  <tr>
    <th scope="row" id="rent">Rent</th>
    <td aria-labelledby="rent">$800</td>
  </tr>
  <tr>
    <th scope="row" id="utilities">Utilities</th>
    <td aria-labelledby="utilities">$150</td>
  </tr>
  <tr>
    <th scope="row" id="groceries">Groceries</th>
    <td aria-labelledby="groceries">$200</td>
  </tr>
</tbody>

这个例子中，我们使用 aria-labelledby 属性来告诉屏幕阅读器这个 td 元素所属的行是哪个。

结论

通过了解 ARIA 属性的基本使用方式和最佳实践，我们可以更加轻松地实现符合标准的无障碍交互式 UI。只要我们注意遵循规范，并给予足够的无障碍信息，我们的交互组件就可以让更多的人使用，从而提高我们的用户体验。

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