html5 aria_如何在HTML5中有效使用ARIA-CSDN博客

html5 aria

ARIA stands for ‘Accessible Rich Internet Applications’ and can help make your website more accessible to people with disabilities such as hearing or visual impairment. Let’s see how we, as developers, can make life easier for them.

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

One way we can use ARIA is by adding it to our HTML. You may already be familiar with semantic elements in HTML such as nav, button or header. It’s quite easy to see what these elements would be used for. These elements give more meaning to the content of a page, and we can use a combination of these elements and ARIA in our markup. However, there are a few things to keep in mind when using them together.

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

ARIA角色 (ARIA Roles)

ARIA roles are added to HTML markup like an attribute. They define the type of element and suggest what purpose it serves. The following example identifies the element as some kind of banner:

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

<header role="banner">

The following example, often placed in a containing element, suggests that its content provides some information about the content within the containing element:

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

<div role="contentinfo">
    This website was built by Georgie.
</div>

An alert with dynamic content should use role="alert":

具有动态内容的警报应使用role="alert" ：

<div role="alert">
    Please upgrade to the latest version of your browser for the best experience.
</div>

This one is my personal favorite, which is used when an element is simply for presentation. If you imagine someone using a screen reader, think of the elements that they would not want read out. One example is an element that might contain a visual decoration, or is an empty element simply serving an image or background color.

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

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

ARIA属性 (ARIA Attributes)

ARIA attributes are slightly different from roles. They are added to markup in the same way, but there is a range of ARIA attributes available for use. All ARIA attributes are prefixed with aria-. There are two types of attributes, states and properties.

ARIA属性与角色略有不同。它们以相同的方式添加到标记中，但是有一系列ARIA属性可供使用。所有ARIA属性都以aria-为前缀。属性有两种类型，状态和属性。

The value of states are bound to change as a result of user interaction.
状态值必然会由于用户交互而发生变化。
The value of properties is less likely to change.
属性的值更改的可能性较小。

An example of an ARIA attribute that is a state is aria-checked. This is used to show the state of elements that are emulating interactive elements, such as checkboxes and radio buttons, but are not the native elements themselves (e.g. custom UI elements built with div and span tags).

aria-checked是一个状态的ARIA属性的示例。这用于显示模拟交互元素的元素的状态，例如复选框和单选按钮，但不是本机元素本身(例如，使用div和span标签构建的自定义UI元素)。

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

An example of an ARIA attribute that is a property is aria-label. This is used when a label for a form element is not visible on the page (perhaps because it makes no sense to make it visible, or if the design dictates this). For cases when label text is visible, aria-labelledby is the more appropriate attribute to use.

作为属性的ARIA属性的一个示例是aria-label 。当表单元素的标签在页面上不可见时使用该标签(可能是因为使其无意义，或者设计要求这样做)。对于标签文本可见的情况， aria-labelledby是更合适的属性。

This can be done with the figure element as shown below.

可以通过如下所示的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>

You can read more about supported states and properties on the W3C website.

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

ARIA规则 (Rules of ARIA)

Before you get too keen, remember that we don’t want to be adding ARIA to every element, for a couple of reasons.

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

尽可能使用语义HTML元素 (Use Semantic HTML Elements Where Possible)

Default implicit ARIA semantics refers to semantics that are already applied to an element by the browser. Elements such as nav, article and button have default implicit ARIA statements of role="navigation", role="article" and role="button" respectively. Before semantic HTML elements existed, it was common to have elements such as <div class="main-navigation" role="navigation">. Now we are able to use nav in place of div, but we no longer need to add role="navigation" because this is already implied. You can refer to this W3C table to check whether or not an ARIA attribute is required for a certain element.

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

您的元素只能扮演一个角色 (Your Element Can Only Have One Role)

An element should not have multiple ARIA roles. The definition of a role is as follows:

一个元素不应具有多个ARIA角色。 role的定义如下：

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

类型的主要指标。这种语义关联允许工具以与用户对该类型其他对象的期望一致的方式呈现和支持与对象的交互。

An HTML element cannot have two roles. All roles are semantic in some way or another, and going by the definition above, an element cannot be two types of an object. Can you have something that is both a button and a heading? No, it has to be one or the other. Choose the role that best describes the function of your element.

HTML元素不能具有的两个role 。所有角色在某种程度上都是语义的，按照上面的定义，元素不能是对象的两种类型。您可以同时拥有按钮和标题吗？不，它必须是另一个。选择最能描述您元素功能的role 。

请勿更改本机语义 (Do Not Change Native Semantics)

You should not apply a contrasting role to an element that is already semantic, as adding a role overrides the native semantics of an element. For example:

您不应将对比role应用于已经具有语义的元素，因为添加role会覆盖元素的本机语义。例如：

<footer role="button">

The second rule of ARIA use does, however, suggest that if you must, you use a nested HTML element instead.

但是， ARIA使用的第二条规则确实建议，如果必须的话，请改用嵌套HTML元素。

<footer><button>Purchase this e-book</button></footer>

您还可以使标记更易于访问吗？ (How Else Can You Make Your Markup More Accessible?)

使用尽可能多的语义元素 (Use as Many Semantic Elements as Possible)

This comes with practice, but if you think of the function of what you are building, it can give you a good idea as to what element you can use that would be much better than a div or a span. To practice, you could continually refer to what elements are available for you to use and familiarize yourself with them.

这是随实践而来的，但是如果您考虑所构建内容的功能，则可以使您对可以使用哪些元素比div或span更好的主意。为了练习，您可以不断参考哪些元素可供您使用并熟悉它们。

One of my favourite examples is the use of blockquote, which is often misused. There are other similar elements which serve specific purposes:

我最喜欢的示例之一是使用blockquote ，它经常被滥用。还有其他类似的元素可以满足特定目的：

q – used to serve inline quotes, such as a direct quote by someone, within paragraph text.
q –用于在段落文本中提供内嵌引号，例如某人的直接引号。
cite – used to cite a creative work within text, such as mentioning a poem.
cite –用来引用文本中的创意作品，例如提及一首诗。

Here is an example containing the two elements above:

这是一个包含以上两个元素的示例：

<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>

There are many HTML elements that you may not have considered, including some new ones, so make sure you have a look at the possibilities!

您可能没有考虑过许多HTML元素，包括一些新元素，因此请确保您了解其中的可能性！

`alt`属性 (`alt` Attribute)

This is an often forgotten piece of markup that can make a huge difference to the accessibility of your markup, especially for screen readers. It has actually been around since HTML2, and is described as follows:

这是一个经常被遗忘的标记，可以极大地改变您的标记的可访问性，尤其是对于屏幕阅读器而言。自HTML2以来，它实际上已经存在，并且描述如下：

text to use in place of the referenced image resource, for example due to processing constraints or user preference.

例如，由于处理限制或用户偏好，将使用文本来代替参考图像资源。

Due to processing constraints or user preference. Regardless of the image not loading (‘processing constraints’), a visually impaired user actually does not have a preference either. By default, they simply have trouble viewing the image the way a person without a visual impairment would. Although the spec says nothing about the term accessibility, it suggests that the image may not load as required, and the user has the ability to turn image loading off. Although we live in a world where the latter seems hard to believe, we cannot assume what our user does on the other end. Therefore we need to provide users with an alternative.

由于处理限制或用户偏好。 无论图像是否未加载(“处理约束”)，视障用户实际上也没有偏好。默认情况下，他们只是无法像没有视觉障碍的人那样查看图像。尽管规范没有对术语“可访问性”进行任何说明，但它表明图像可能无法按要求加载，并且用户可以关闭图像加载功能。尽管我们生活在一个似乎难以相信后者的世界中，但是我们无法假设用户在另一端所做的事情。因此，我们需要为用户提供替代方案。

People often write alt text such as “dog” for a photograph of their dog playing in the park, for example. Unfortunately, despite including this text, it really doesn’t paint a picture for the visually impaired. The following is more acceptable:

例如，人们经常在他们的狗在公园玩耍的照片上写诸如“狗”之类的alt文字。不幸的是，尽管包含了此文本，但它实际上并没有为视障者绘制图片。以下是更可接受的：

<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park">

Note that the alt attribute does not reflect the same purpose as the figcaption element – the purpose of alt is to provide alternative text for an image, while figcaption can be a relevant caption for a figure. Using the same example, this may be appropriate text:

请注意， alt属性不能反映与figcaption元素相同的目的– alt的目的是为图像提供替代文本 ，而figcaption可以是figure的相关标题。使用相同的示例，这可能是合适的文本：

<figcaption>Isn’t Bobby cute?</figcaption>

考虑语义可访问性的使用语义HTML和ARIA的示例 (An Example Using Semantic HTML and ARIA, Taking Accessibility into Account)

If you look at the example I included earlier in this article, you’ll see that I included something that:

如果您看一下我在本文前面包含的示例，您将看到我包含的内容：

uses semantic HTML for an image and its caption
对图像及其标题使用语义HTML
uses the cite element appropriately
适当使用cite元素
provides appropriate alt text
提供适当的alt文字
uses one of the ARIA attributes I’ve already mentioned
使用我已经提到的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>

结论 (Conclusion)

ARIA roles and attributes can make a huge difference when your content is processed by screen readers and other assistive technologies. As the use of assistive technologies becomes more common, we need to consider integrating ARIA in our code as a regular practice.

当屏幕阅读器和其他辅助技术处理您的内容时，ARIA角色和属性会产生巨大的变化。随着辅助技术的使用变得越来越普遍，我们需要考虑将ARIA集成到我们的代码中作为常规做法。