如何基于 ARIA 规范构建无障碍友好的 UI 控件-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的普及，我们使用的应用程序和网站越来越多。然而，我们并不总是能够获得与其他人一样的访问这些资源的能力。例如，存在一部分用户，他们需要使用助听器、屏幕阅读器或其他辅助设备来访问网站，使他们能够在互联网中实现生活中的常见任务。这个例子中的用户被称为 “残障人士”（人们偏好地称之为 “残疾人士”）。

在无障碍界面设计的过程中，ARIA 规范（可访问性渐进式增强技术）是一个必不可少的规范，可以确保残障人士能够像其他人一样访问网络资源，并使用功能更加强大和易用的界面。本文将介绍如何基于 ARIA 规范构建无障碍友好的 UI 控件。

ARIA 规范简介

ARIA 是一组 Web 技术规范，其目的是使 Web 内容和 Web 应用程序可访问性更好。ARIA 规范为当前不支持无障碍交互的 Web 应用程序添加标准属性和事件，使残障人士可以使用助听器、屏幕阅读器和其他辅助技术与界面进行交互。ARIA 定义了一组 semantic role（语义角色）、state（状态）和property（属性），以描述网页上控件的行为、结构和意义。

如何构建无障碍友好的 UI 控件

使用 role 属性

role 属性用于将语义信息（如按钮、列表或标签页等）添加到 HTML 标记中，以便屏幕阅读器和其他助听器可以识别它们。以下是 role 属性的几个示例：

<button role="button">Click Me!</button>
<nav role="navigation"> ... </nav>
<table role="table"> ... </table>
<h1 role="heading" aria-level="1">Page Title</h1>

这些语义信息可以帮助香盲用户正确地导航网站，并使他们能够更好地理解网站的结构和内容。

使用 aria-label 和 aria-labelledby 属性

使用 aria-label 属性可以为一个元素提供一个简短的描述，该描述提供了一个人类读者能够理解的标签。这通常用于没有相关文本的图像或按钮。例如：

<button aria-label="Add Item">+</button>
<img src="..." alt="" aria-label="Fun Image">

而使用 aria-labelledby 属性可以将一个元素关联到一个标准元素、一个指定 ID 的元素、一个 title 属性和 / 或一个 name 属性中的值。以下是用于指定 aria-labelledby 属性的示例：

<label id="label1">Item Name:</label>
<input type="text" aria-labelledby="label1">
<h2 id="main-heading">Main Heading</h2>
<nav aria-labelledby="main-heading"> ... </nav>

以上示例中，输入元素使用了 aria-labelledby="label1" 属性，将输入元素与 id="label1" 的标签关联起来，这样屏幕阅读器就可以生成一个简短的标签。

使用 aria-expanded 属性

aria-expanded 属性表示元素是否展开或折叠。它可以用于例如折叠面板、标签页或下拉列表等组件。以下是使用 aria-expanded 属性的示例：

<button aria-expanded="true" aria-controls="panel1">Collapse Panel</button>
<div id="panel1" role="region">
...
</div>

这个示例中，当按钮被点击时，折叠面板展开或折叠，屏幕阅读器也会相应地告知用户。

使用 aria-describedby 属性

aria-describedby 属性用于将辅助文本描述添加到一个元素，这个描述提供了一个简短的、可理解的解释，并为残障人士提供了额外的信息。以下是使用 aria-describedby 属性的示例：

```
<input type="text" aria-describedby="name-desc">
<div id="name-desc">
Please enter your full name (first and last name).
</div>
```
在这个示例中，当屏幕阅读器移动到输入元素时，它将给出 Please enter your full name (first and last name). 的提示，帮助用户更好地理解界面语义。

使用 aria-live 属性

aria-live 属性指定了一个元素是否需要被立即报告到用户，在它的内容发生变化时，例如聊天室应用程序。以下是使用 aria-live 属性的示例：

```
<div aria-live="polite">
New chat message from JohnDoe
</div>
```
这个示例中，当新消息到达聊天室时，屏幕阅读器将在内容发生变化时通知用户。

结论

ARIA 规范为 Web 应用程序开发者提供了一种构建无障碍友好的 UI 控件的标准方法，它涵盖了一系列用于增强 Web 内容可访问性的语义角色、状态和属性。在设计界面时，开发者应该使用这些方法，使残障人士能够同其他用户一样访问 Web 内容。

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