如何在HTML5中有效使用ARIA

ARIA代表“可访问的丰富Internet应用程序”，可以帮助使您的网站更容易被听力或视觉障碍等残障人士使用。让我们看看我们作为开发人员如何使他们的生活更轻松。

我们可以使用ARIA的一种方法是将其添加到HTML中。您可能已经熟悉HTML语义元素，例如nav，button或header。很容易看出这些元素的用途。这些元素赋予页面内容更多的含义，我们可以在标记中结合使用这些元素和ARIA。但是，将它们一起使用时，需要牢记一些注意事项。

ARIA角色

ARIA角色像属性一样添加到HTML标记中。他们定义了元素的类型并提出了它的作用。以下示例将元素标识为某种横幅：

<header role="banner">

以下示例通常放置在一个contains元素中，表明其内容提供了有关contains元素内内容的一些信息：

<div role="contentinfo">

    This website was built by Georgie.

</div>

具有动态内容的警报应使用

：

<div role="alert">

    Please upgrade to the latest version of your browser for the best experience.

</div>

这是我个人的最爱，用于仅用于表示的元素。如果您想象有人使用屏幕阅读器，请考虑一下他们不想读出的元素。一个示例是可能包含视觉装饰的元素，或者是仅提供图像或背景色的空元素。

<a href="aria.html" role="presentation">

  <img src="aria-thumbnail.jpg" role="presentation" alt="Use ARIA effectively">

</a>

ARIA属性

ARIA属性与角色略有不同。它们以相同的方式添加到标记中，但是有一系列ARIA属性可供使用。所有ARIA属性都以开头

。属性有两种类型，状态和属性。

• 由于用户交互，状态的值必然会发生变化。
• 属性的值更改的可能性较小。

状态为ARIA属性的示例是

。这用于显示正在仿真交互元素的元素的状态，例如复选框和单选按钮，但不是本机元素本身（例如，使用 和 标签构建的自定义UI元素）。

<span role="checkbox" 

      aria-checked="true"

      tabindex="0"

      id="simulatedcheckbox">

</span>

作为属性的ARIA属性的示例是

。当表单元素的标签在页面上不可见时使用该标签（可能是因为使其无意义，或者在设计中规定了此标签）。对于标签文本可见的情况， 更适合使用的属性。

可以使用

如下所示的元素来完成此操作。

<figure aria-labelledby="operahouse_1" role="group">

    <img src="operahousesteps.jpg" alt="The Sydney Opera House">

    <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>

</figure>

您可以在W3C网站上阅读有关受支持的状态和属性的更多信息。

ARIA规则

在您变得过于敏锐之前，请记住，出于两个原因，我们不想将ARIA添加到每个元素中。

尽可能使用语义HTML元素

默认的隐式ARIA语义是指浏览器已应用于元素的语义。等元素nav，article并button拥有默认隐含ARIA报表role="navigation"，role="article"并role="button"分别。在出现语义HTML元素之前，通常有诸如这样的元素
。现在我们可以nav代替使用div，但我们不再需要添加，role="navigation"因为这已经暗示了。您可以参考此W3C表来检查某个元素是否需要ARIA属性。