在 HTML 中使用 ARIA 的规则

html-css012

在 HTML 中使用 ARIA 的规则,第1张

一个例子:

它将向用户代理暗示,这是一个 note ,用来记录一些您需要留意的事情。

尽管 ARIA 非常有用,但我们必须注意何时以及如何使用它。

在 HTML 中使用 ARIA 的首要规则是尽量不要在 HTML 中使用 ARIA(如果不需要的话)。HTML5 语义元素为我们提供了一系列具有隐式含义的元素,类似于我们可以使用 ARIA 定义的显式含义,常被称为元素的 默认隐式 ARIA 语义 。

因此,只要有可能,我们就应该使用 HTML 语义元素来代替 ARIA 属性。

例如下面这个例子:

上面的写法是错误的,你不应该使用 <div> 和 ARIA role 来创建一个按钮。

我们应该只使用一个明确其语义的 <button> 元素,就像这样:

正如我们提到的,许多 HTML 语义元素对它们都有隐含的意义。

例如:

由于这些元素中的许多元素都具有隐含的含义,因此建议不要使用 ARIA role 来更改它们。以下是一个例子:

以上写法是错误的,我们应该使用适当的元素,而不是重新调整语义元素的用途。

或者,我们可以将 ARIA role 应用到一个没有任何含义的元素上(你觉得有必要的话),如 <span>。

其他一些冗余 ARIA 的示例:

HTML5 使用默认的隐式语义定义了一组新的结构和分段元素,这些语义与 ARIA role 匹配(在某些情况下):

这意味着在实现后,浏览器将公开该元素的默认隐式语义,因此您不必这样做。

在元素上使用 ARIA role 并不足以真正改变元素的 role 。例如,如果我们试图将一个 <div> 更改为一个 <button>,则需要手动添加适合 <button> 的交互功能。

在 ARIA 指南中,有一个每个元素应该具有的功能列表。例如,一个有效的按钮必须满足以下要求:必须可以用光标、回车键、空格键单击(配合 JS 可以轻松实现)。

在使用 ARIA role 时,我们需要了解这些需求。使元素看起来像按钮并不能使它成为按钮。我们需要考虑所有媒介中的用户如何与元素交互。

ARIA role="presentation" 属性意味着元素仅用于视觉目的,并且不以任何方式交互。 aria-hidden="true" 属性表示元素不应可见。

当我们使用这些属性时,我们需要知道它们所应用到的元素以及它们的可见性和交互状态。例如,这两个按钮都会导致一些用户关注他们不存在的元素。

以上写法都是不正确,这些属性只能应用于非交互或不可见的元素。

可以与之交互的元素,例如按钮和链接,需要有一个 可访问的名称(Accessible Name) 可访问名称 是在可访问性 API 属性具有有效值时确定的。

可以根据元素的类型指定元素的可访问名称。例如,表单输入通常从相应的 <label> 元素获取其可访问的名称。

其他元素,例如按钮和链接,可以从它们的文本内容或标签属性中获得它们的可访问名称。

如:<input type=”text” aria-label=”用户名”/>

此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。

以上来自百度,第一条就是。

http://accessibilityunion.org/archives/808