如何使用无障碍 API 创建功能强大的无障碍增强器

简介

在现代 Web 应用程序中，无障碍（Accessibility，简称 a11y）已经成为一种不可或缺的特性。对于有残障人士、老年人、以及其他具备特殊需求的用户而言，无障碍功能可以带来更加友好、易用的用户体验，让 Web 服务更加具有包容性。但是，实现无障碍功能并不是一件简单的事情。幸运的是，现代浏览器提供了丰富的无障碍 API，可以帮助我们实现这些特性。

在本文中，我们将详细介绍如何利用无障碍 API 创建功能强大的无障碍增强器。我们将学习如何使用以下 API：

• aria-* 属性
• role 属性
• tabindex 属性
• focus() 方法
• blur() 方法

我们还将通过具体的代码示例来演示如何使用这些 API，帮助我们更好地理解和应用它们。

1. aria-* 和 role 属性

aria-* 属性和 role 属性是无障碍 API 中最常用的两种属性。它们的作用是为网页元素提供语义化的信息，告诉屏幕阅读器元素的用途和功能，以便用户更好地理解页面内容。

aria-* 属性有多个不同的属性值，每个属性值都表示不同的状态或关系。例如，aria-hidden="true" 表示元素对屏幕阅读器是不可见的，aria-expanded="false" 表示元素处于折叠状态。一般来说，首选使用标准属性而非 aria-* 属性。但是，当标准属性无法提供必要的语义化信息时，我们可以使用 aria-* 属性。

role 属性用于为元素指定角色，告诉屏幕阅读器元素的类型。例如，role="button" 表示元素是一个按钮，role="navigation" 表示元素是一个导航菜单。通过指定角色，我们可以使元素更具有可访问性，因为屏幕阅读器可以获取更多与特定角色相关的行为和属性。

下面是一个使用 aria-* 和 role 属性实现的例子：

<div role="button" tabindex="0" aria-pressed="false" aria-label="Toggle">
  Click me!
</div>

在上面的代码中，我们创建了一个模拟按钮，使用 role="button" 告诉屏幕阅读器它是一个按钮，同时使用 aria-pressed 属性来表示它的切换状态，并通过 aria-label 属性来提供它的 Label（对于有视障的用户而言， "Click me!" 这个文本并不能提供足够的信息，因此需要 label）。此外，我们还将 tabindex 属性设置为 0，使它可以聚焦，因此可以通过键盘进行操作。

相信通过这个例子，读者已经基本掌握了 aria-* 和 role 属性的使用方法。接下来，我们将学习更多关于无障碍功能的实现。

2. tabindex 属性和 focus() 方法

tabindex 属性用于指定网页元素的聚焦顺序。如果一个元素不是表单元素，那么它默认是不可聚焦的。但是，我们可以使用 tabindex 属性把它设置为可聚焦的。

以下是一个在页面当中，依次聚集的 button：

<button tabindex="1">One</button>
<button tabindex="2">Two</button>
<button tabindex="3">Three</button>

在这个例子中，我们为 button 元素分别指定了 tabindex 属性，告诉浏览器它们的聚焦顺序。tabindex 属性的取值可以是任何整数，但值越小，优先级越高。

当你想要在程序代码中让一个元素获取焦点时，你可以使用 focus 方法。例如，假设我们有以下 HTML 代码：

<button id="my-button">Click me</button>

我们可以使用 JavaScript 代码来让它自动聚焦：

document.getElementById('my-button').focus();

在这个例子中，我们使用了 getElementById 方法来获取 ID 为 my-button 的元素，并在该元素上调用了 focus 方法，使其聚焦。

3. blur() 方法

与 focus() 方法相反的是，blur() 方法用于将焦点从当前元素中移除。这通常在用户完成操作后，需要程序自动将焦点转到另一个元素时比较有用。

例如，当用户填写一个表单后，您可能希望在提交后将焦点移动到另一个元素上。这时，您可以利用 blur() 方法，将当前元素的焦点移除。

以下是一个将焦点从当前元素移除的例子：

<button id="my-button">Click me</button>

document.getElementById('my-button').blur();

在这个例子中，我们使用了 blur() 方法来取消 my-button 的焦点。这通常在某些需要自动移除焦点的操作中使用，例如自动化测试、键盘可访问性等。

结论

无障碍功能是现代 Web 应用程序中不可或缺的一环。使用无障碍 API 可以帮助我们增强网站的可用性和用户体验，为残障人士、老年人、以及其他具备特殊需求的用户打造更加友好和易用的应用程序。在本文中，我们详细介绍了无障碍 API 中最常用的几个属性和方法，并通过具体的代码例子帮助我们更好地理解和应用它们。我们希望本文能够为读者提供实用的指导，并帮助他们创建更加无障碍的 Web 应用程序。

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