首页 >> HTML5+CSS3 >> 如何在HTML5中有效使用ARIA

如何在HTML5中有效使用ARIA

287865 2021-02-22 0
浏览次数886

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>

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

role="alert"

<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-
。属性有两种类型,状态属性

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

状态为ARIA属性的示例是

aria-checked
。这用于显示正在仿真交互元素的元素的状态,例如复选框和单选按钮,但不是本机元素本身(例如,使用
div
span
标签构建的自定义UI元素)。

<span role="checkbox"
      aria-checked="true"
      tabindex="0"
      id="simulatedcheckbox">
</span>

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

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

可以使用

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

<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属性。

全部评论:0