[翻译]如何在HTML5中有效使用ARIA

Posted 2020-07-08 脚后跟着猫

ARIA是Accessible Rich Internet Application的简称，指无障碍富互联网应用。可以使一些有功能障碍（如听力，视力）的人群，使用你的网站。下面看一下做为开发人员的我们，如何让他们使用起来更容易。

使用ARIA的一种方式，是添加ARIA到我们的html中。你可能对在HTML中使用语义化元素很熟悉了，如nav,button,header。使用它们，可以很容易表达块的作用。这些元素可以更好地表达页面中内容的意思，我们可以把这些元素和ARIA组合使用。不过，在一起使用它们时，有几件需要记住的事情。

ARIA角色

ARIA role可以像属性一样添加到HTML标记上。声明元素类型并建议其提供的信息作用。下面是一个识别元素为banner的例子：

<header role="banner">

下面这个例子，通常放到一个包含元素中，提示其内容提供了，有关包含的元素中的内容的一些信息：

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

使用动态内容的alert，使用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属性和角色略有不同，添加到HTML标记的方法相同，但有一定范围的ARIA属性可供使用。所以ARIA属性都带aria-前缀。有两种ARIA属性类型，分别为状态和属性值。

• 状态值，是在用户交互时必然要修改的
• 属性值，是不太可能修改的

这里有一个ARIA状态属性aria-checked的例子，这里去模拟交互元素的显示元素的状态，比如checkbox和radio按钮，但它们本身并不是原生的元素（如：用div和span标签来构建自定义UI元素）

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

使用ARIA属性，其中属性名为aria-label的例子。这是一个在页面中不显示（如果设计要求显示也可以显示），但用来表示form元素的label标签的。当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"声明。在语义化标签出来之前，常见的元素如<div class="main-navigation" role="navigation">。现在可以使用nav来代替div，而且不再需要添加role="navigation"。可以到W3C的目录上去查看，哪些元素已经隐含的ARIA属性。

元素只能有一个角色

一个元素不能有多个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.

HTML元素不能有两个角色，所有角色都是以这样或那样的方式进行主义化的，就像定义上面说的，一个元素不可能是两种类型的对象。你能想象一个元素既是按钮又是标题吗？不可能，两者只能选其一。选择一个可以最可以体现元素功能的角色。

不要修改原始的语义

不应该为一个语义化的标签定义不同的角色，通过添加role去重定义语义化的标签。

<footer role="button">

ARIA使用第二规则，但是，如果必须重定义，那就使用嵌套HTML元素来替代

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

其他关于无障碍阅读的标记

尽可能使用主义化元素

这是明显的做法，如果你认为你正要构建的功能块，可以给它比直接使用div ,span更好的元素来定义。在实践中，你会不断认识到，更好地使用哪些元素，并且很好地熟悉它们。

这里有个例子是对blockquote的使用（它经常被误用）。还有其他类似的服务于特殊用途的元素。

• q --用于提供行内引用，比如在段落文本中直接引用某人
• cite --用于在文本中引用创作作品，如引用的一首诗

<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>

有许多你可能没有注意到的HTML元素，包括一些新引入的，保证尽可能多地了解HTML元素。

alt属性

这是一个经常被遗忘的属性，使用它可以大大增加标记的无障碍的阅读性，尤其是对屏幕阅读器。它实际上从HTML2就已经引入了，描述如下：

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

文本用于替代引用的图像资源，例如处理限制或用户偏好。

由于处理限制或用户偏好。不管是图像没有加载（处理限制），视力不好的用户实际没有偏好。l默认情况下，他们根本无法像正常人一样，观看图像。

虽然规范上没有提可访问性的术语，它表明，是在图像无法加载或用户停止加载时，来替代使用的。虽然我们无法设身处地地为他们考虑，但我们也不能保证我们所有的用户没有这方面的需求，因此，我们应该给用户一个替代选择。

例如，人们经常给在公园玩的狗的照片的alt文本中写上如“dog”。尽管写了这个，但这无法给有障碍的人，提供足够的信息，去了解这张图片的内容。

下面是更好的方式：

<img src="bobby.jpg" alt="我的狗在公园里玩耍">

请注意，alt属性和figcaption元素所起到的作用是不同的。alt的意图是为图像提供一种替代文本，而figcaption是为figure提供相关的标题。相同的例子中使用figcaption时，它应该提供的文本如下：

<figcaption>小狗可爱不?</figcaption>

使用语义化HTML和ARIA，使所有用户都能使用

如果看一下文章前面包含的示例，你会看到里面包含了以下内容：

• 为图像和它的标题，使用语义化HTML
• 在适当的地方使用cite元素
• 恰当地提供alt文本
• 使用一个上面提到过的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>

总结

ARIA 角色和属性可以改善页面的可读性，如在屏幕阅读器或其他辅助性技术上。由于辅助技术变得越来越普遍，需要把在代码中集成ARIA，作为一个常规项来完成。

原文：How to Use ARIA Effectively with HTML5

原文作者：Georgie Luhur

原文链接：https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/