在 HTML 中使用 ARIA 的规则

什么是 ARIA？

Accessible Rich Internet Applications(WAI-ARIA，简称 ARIA)是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用(特别是那些由 JavaScript 开发的)的一套机制。最值得注意的是，它包含了一组属性，我们可以添加到 HTML 元素中，将更多的语义信息嵌入其中，这些信息可以被辅助技术读取。

• ARIA 可以通过 HTML 属性为屏幕阅读器提供了额外的信息。其不影响元素如何被渲染在浏览器中。

• ARIA role 没有为大多数元素的默认语义添加任何内容。

• 您可以通过遵循 ARIA 标准(例如：HTML 语义，使用 alt 属性并以预期的方式使用 [role = button])来使您的网站更易于访问

一个例子：

<style>
  [role='note'] {
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid rebeccapurple;
    color: rebeccapurple;
    border-radius: 5px;
  }
</style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum totam.
  </div>
</section>

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

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

使用 HTML5 语义以支持 ARIA

您应该使用已经内置了所需语义和行为的原生 HTML 元素或属性，而不是重新使用 HTML 元素并添加 ARIA role、状态或属性使其可访问。

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