在 HTML 中使用 ARIA 的规则

一个例子：

它将向用户代理暗示，这是一个 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

---