ARIA入门

Finding purely static websites today is becoming harder and harder. The line between website and web application blurs more and more as clients want more interactivity and real-time interaction on their site. This rich experience raises accessibility concerns though.

如今，找到纯静态网站变得越来越困难。 网站和Web应用程序之间的界限越来越模糊，因为客户希望在其网站上实现更多的交互性和实时交互性。 但是，这种丰富的经验引起了对可访问性的担忧。

To create a lot of these dynamic interfaces, we often have to use (X)HTML elements outside of their semantic meaning. For example, navigation is marked up using list-items. That is all fine and well for a sighted visitor…we can see that the list is meant to be navigation. However, to a non-sighted user who is relying on a screen reader to determine the usage of elements on a site, it is difficult at best to determine that the list is used as a navigation structure.

要创建许多这样的动态接口，我们经常不得不在其语义含义之外使用(X)HTML元素。 例如，使用列表项标记导航。 对于有视力的访问者来说，这很好，而且很好……我们可以看到该列表是用于导航的。 但是，对于依赖屏幕阅读器来确定站点元素使用情况的盲人来说，充其量很难确定该列表用作导航结构。

That is where Accessible Rich Internet Applications (ARIA) come into play. ARIA offers attributes that we can use to add semantic meaning to elements. One of those is the role attribute.

这就是可访问的富Internet应用程序(ARIA)发挥作用的地方。 ARIA提供了可用于向元素添加语义的属性。 其中之一是角色属性。

添加一些信息 (Add Some Information)

Roles provide information on what an object in the page is and help to make markup semantic, usable, and accessible. Using our previous example of a list used for navigation, by providing the role attribute, we can help the user agent to understand that the list is being used for navigation.

角色提供有关页面中的对象是什么的信息，并帮助使标记具有语义，可用性和可访问性。 使用前面的导航列表示例，通过提供role属性，我们可以帮助用户代理了解该列表正用于导航。

`

`

• • …
  • …

`

`

Likewise, we can tell the user agent if a paragraph is being used as a button:

同样，我们可以告诉用户代理是否将段落用作按钮：

`

`

• …

  …

`

`

There are many different WAI roles to utilize. Nine of them where imported from the XHTML Role Attribute Module:

有许多不同的WAI角色可以利用。 从XHTML角色属性模块导入的其中九个：

1. banner - typically an advertisement at the top of a page

   banner -通常是页面顶部的广告

2. contentinfo - information about the content in a page, for example, footnotes or copyright information

   contentinfo有关页面内容的信息，例如脚注或版权信息

3. definition - the definition of a term

   definition -术语的定义

4. main - the main content of a page

   main页面的主要内容

5. navigation - a set of links suitable for using to navigate a site

   navigation -一组适合用于导航站点的链接

6. note - adds support to main content

   note -为主要内容添加支持

7. search - search section of a site, typically a form.

   search -网站的搜索部分，通常是表单。

8. secondary - a unique section of site

   secondary -网站的唯一部分

9. seealso - contains content relevant to main content

   seealso包含与主要内容相关的内容

The ARIA 1.0 specification also includes support for many more roles set down in the ARIA Role taxonomy. These include roles like button, checkbox, textbox and tree. There are many available there, so I am not going to try and show them all here For that you can take a look at the ARIA working draft.

ARIA 1.0规范还包括对ARIA角色分类法中设置的更多角色的支持。 这些角色包括button ， checkbox ， textbox和tree 。 那里有很多可用的内容，因此在这里我不会尝试显示所有内容。为此，您可以看一下ARIA工作草案 。

现在出于某种意义 (Now For Some Meaning)

In addition to the information provided by the role attribute, we can further add meaning about the state and relationship of elements with states and properties. Unlike roles, which are static, states and properties may change. For example, one state that is available is checked, which as you may guess is used with an element that has a role of checkbox. When a checkbox is unchecked the checked state is false. When the checkbox is checked, the checked state should change to true.

除了角色属性提供的信息外，我们还可以添加有关状态以及元素与状态和属性之间的关系的含义。 与静态角色不同，角色和状态可能会改变。 例如， checked一个可用状态，您可能会猜想它与具有checkbox角色的元素一起使用。 当一个checkbox是选中的checked状态是假的。 checkbox ， checked状态应更改为true。

Using states and properties is rather easy to do:

使用状态和属性非常容易做到：

`

`

3. Add Some Style

   添加一些样式

   In browsers that support attribute selectors in CSS, we can even use our new roles, states and properties to provide different visual effects to reflect an elements meaning. For example, we can target all items on a page that have an aria-required state with this:

   在支持CSS中属性选择器的浏览器中，我们甚至可以使用新的角色，状态和属性来提供不同的视觉效果，以反映元素的含义。 例如，我们可以使用以下命令来定位页面上所有状态必须为aria-required项目：

   `

   `

   • *[aria-required=“true”] { background: yellow;}
     * [aria-required =“ true”] {背景：黄色；}

   `

   `

   In addition, some states have pseudo-classes that can be used to reflect the changes in state. Consider a list-item that is tagged with an aria-checked state. Using the :before pseudo-class, we can provide a different image with each state change. (Note: this example is used in the W3C Working Draft)

   另外，某些状态具有可用于反映状态变化的伪类。 考虑一个标有aria检查状态的列表项。 使用:before伪类，我们可以为每个状态变化提供不同的图像。 (注意：此示例在W3C工作草案中使用 )

   `

   `

   1. *[aria-checked=true]:before {content: url(‘checked.gif’)}

      * [aria-checked = true]：在{content：url('checked.gif')}之前

   2. *[aria-checked=false]:before {content: url(‘unchecked.gif’)}

      * [aria-checked = false]：在{content：url('unchecked.gif')}之前

   `

   `

   There is a lot of value in using ARIA. It helps to give meaning to the usage of an element on a page, greatly increasing the accessibility of a site. It’s very easy to use, and doesn’t break in browsers that don’t support it. If you want to learn more about ARIA and how to start implementing it, I highly recommend checking out the W3C’s overview on the topic.

   使用ARIA有很多价值。 它有助于赋予页面上元素使用的意义，从而大大增加了网站的可访问性。 它非常易于使用，并且在不支持它的浏览器中也不会损坏。 如果您想了解有关ARIA的更多信息以及如何开始实施它，我强烈建议您查看有关该主题的W3C概述 。

翻译自: https://timkadlec.com/2008/03/getting-started-with-aria/