动手使用ARIA：Web应用程序的可访问性食谱

在令人困惑的Web应用程序世界中，ARIA可以帮助您提高创作的可访问性和易用性。 HTML无法处理页面上元素之间的多种类型的关系，但是ARIA对于几乎可以进行的任何类型的设置都是理想的选择。 让我们看一下什么是ARIA，如何将ARIA应用于您的Web应用程序以及一些可用于自己的网站的快速食谱。

ARIA的基础

ARIA（也称为WAI-ARIA）代表Web无障碍倡议–无障碍富Internet应用程序。 由W3C更新的该计划旨在为开发人员提供一组新的架构和属性，以使他们的创作更易于访问。 它专门旨在弥补HTML留下的固有差距。 如果您不熟悉它的功能，则应该看看我们关于ARIA的入门 。 您可能也对我们的主页上的ARIA和电子商务上的ARIA感兴趣。

简而言之，ARIA具有我们将关注的三个主要功能：

1. 在父子关联之外创建关系：HTML仅允许父子元素之间的关联，但是我们要定义的关联并不总是相互嵌套。 通过ARIA，我们可以在此约束之外定义元素关系。
2. 定义高级控件和交互性：HTML涵盖了许多基本的UI元素，但是在网络上使用了许多高级控件，这些控件很难在其可视组件之外进行定义。 ARIA为此提供了帮助。
3. 提供对“实时”区域更新属性的访问： aria-live属性为屏幕阅读器和其他设备提供了页面内容更改时的侦听器。 这样可以更轻松地传达屏幕内容何时更改。

ARIA和Web应用程序

之前，我们曾考虑将ARIA添加到电子商务页面和网站首页的通用元素中。 但是，使用网络应用程序时，每个应用程序与上一个都有很大的不同。 形式和功能在每个应用程序之间移动，甚至在同一应用程序的版本之间移动。 因此，在这里，我们将把我们的实现视为菜谱中的食谱，而不是页面的批量转换。

当涉及到网络应用程序时，从广义上讲，很难确定用户的意图。 使用电子商务，无论您在哪个站点上，访问者都可能希望购买产品或服务。 Web应用程序具有多种用途，因此，我们将专注于创建可访问且用户友好的细微差别的控件。

让我们进入其中一些控件类型。

使用按钮控制实时更新

我们要看的第一个控件是通过按按钮更新的显示值。 在元素显示数量时，通常会看到这些类型的控件，这些数量可以通过标有' + '和' - '的按钮进行调整，但可以采用多种形式，例如，使您可以循环浏览预定义状态的箭头按钮。

标准的实现可能会给用户带来一些理解上的空白。 尚不清楚按钮会影响哪些元素，它们如何影响它们以及元素的值何时更改。

在下面，我们将使用ARIA通过aria-controls属性在按钮和值显示元素之间创建连接。 然后，通过使用aria-label和HTML <label>来使按钮的使用变得清晰。 最后，我们将利用aria alert角色和aria-live属性使用户知道何时更新值。

让我们看一下代码是什么样的：

<form action="">
  <fieldset>
    <legend>Adjust Quantity</legend>
    <div>
	  <label for="qty-element">Current Quantity</label>
	  <input type="text" role="alert" aria-live="assertive" value="0" id="qty-element" />
	  <button type="button" aria-label='Add to Quantity' aria-controls="qty-element">+</button>
	  <button type="button" aria-label='Subtract from Quantity' title="subtract 10" aria-controls="qty-element">=</button>
	</div>
  </fieldset>
</form>

ARIA弹出式窗口和悬停工具提示

在为站点配备ARIA时，通常使用“渐进式可访问性”。 该术语的含义是使网站或Web应用程序从其基本形式变为完全可访问是一项艰巨的任务。 为了以仍然可以向前移动的方式处理此问题，您可以逐步并迭代地实现新功能。

对于具有相关弹出窗口或模式的工具提示，这意味着我们可以将问题分为两个步骤，并尽可能地逐步展开。 在这种情况下，我们正在谈论的工具提示是一个小问号的通用图像，当它悬停时会打开其他信息。

为了让用户知道问号图像实际上是一个工具提示，我们通过使用适当的角色来定义它，如下所示：

<img src="question-mark.jpg" role='tooltip' />

但是，此实现存在一些问题。 用户可能仍然不知道将鼠标悬停在工具提示上会弹出带有更多信息的弹出窗口。 我们可以将其添加到代码中：

<img src="question-mark.jpg" role='tooltip' aria-haspopup='true' aria-controls='tooltip-popup' />

<div id='tooltip-popup' aria-hidden='true'>
    Tooltip text
</div>

无障碍输入工具提示

除了基于悬停的工具提示外，Web应用还经常使用表单，其中每个输入都有自己的关联工具提示。

如果没有其他ARIA标记，可能很难分辨出哪些工具提示适用于用户的哪些输入。 在某些情况下，没有适当的关系可能会使您的助手文本无用。

为了解决这个问题，我们将工具提示包装在它们自己的元素中。 它们中的每一个都可以嵌套在它们的相关输入附近，并与ARIA建立关系，然后可以使用JavaScript（如果您很精明，也可以使用CSS）触发。

看起来是这样的：

<form action="">
  <fieldset>
    <legend>User Login</legend>
    <div>
      <input type="text" id="user" aria-describedby="user-tip" />
	  <label for="user">Your Username</label>
      <div role="tooltip" id="user-tip">Tooltip about their username</div>
	</div>
	<div>
      <input type="password" id="password" aria-describedby="password-tip" />
      <label for="password">Your Username</label>
      <div role="tooltip" id="password-tip">Tooltip about their password</div>
	</div>
  </fieldset>
</form>

状态警报

“当前我们的服务已关闭”，“您的帐户已被暂停”，并且相关状态警报通常在网络应用中使用，并为用户显示重要信息。 没有ARIA，它们可能会埋在页面上的信息中，并导致各种问题。

利用ARIA alert角色和aria-live属性，我们可以确保用户到达页面后可以Swift意识到任何问题。

我们可以这样设置状态警报：

<div id="system-status" role="alert" aria-live="assertive">
    <p>The system is offline!</p>
</div>

创建工具栏

最后，让我们看一下Web应用程序中使用的另一个常见控制元素：工具栏。 出于我们的目的，我们将标记一个如下所示的工具栏：我们的Web应用程序显示大量数据，这些数据以表格为单位。 在此表格上方，我们的工具栏上有几个按钮，允许用户以各种方式对表格进行排序。 这些按钮包括经典的排序选项，例如A到Z和Z到A。

相对而言，这些留下了一些有关可访问性的问题。 首先，尚不清楚这些按钮是否会影响表格-我们将使用aria-controls属性解决此问题。 还不清楚按钮之间是否相互关联，这可能对我们的用户有用。 为了定义这一点，我们将使用toolbar角色。 最后，用户不一定知道最后按下哪个按钮。 为了解决这个问题，我们将使用aria-pressed属性。

使用aria-pressed属性时，请务必注意，当用户与这些元素进行交互时，您必须更新这些元素。 这可能需要通过JavaScript或jQuery更改属性。

我们的工具栏代码如下所示：

<div role="toolbar" aria-label="Sorting Toolbs" aria-controls="data-table">
  <button type="button" aria-pressed="false" aria-label='Sort Alphabetically, A to Z'>A to Z</button>
  <button type="button" aria-pressed="true" aria-label='Sort Alphabetically, Z to A'>Z to A</button>
  <button type="button" aria-pressed="false" aria-label='Sort Numerically'>Numerical</button>
</div>

<table id='data-table'>
 ...
</table>

将ARIA添加到您自己的Web应用程序

有了这些新的控制方案和联系，您就可以充分利用自己的Web应用程序！ 在添加了这些新标记之后，请考虑如何将这些属性应用于用户界面的其他部分，以最大程度地提高创建的可用性。

您是否想了解ARIA的属性，角色或其他功能？ 也许您对自己的实现或本文的更正有疑问？ 使用下面的评论部分或在Twitter上标记kylejspeaker来取得联系！

翻译自: https://code.tutsplus.com/tutorials/hands-on-with-aria-web-application-controls--cms-31898