
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属性的示例是
<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属性。