ARIA 和非原生 HTML 语义简介
迄今为止，我们一直在鼓励使用原生 HTML 元素，因为它们可为您提供焦点、键盘支持和内置语义，但有时简单布局和原生 HTML 达不到目的。例如，弹出式菜单这个很常见的界面构件目前尚无相应的标准化 HTML 元素。也没有提供“用户需要尽快了解与此有关的信息”之类语义特性的 HTML 元素。
因此，在本节课中，我们将探究如何表达 HTML 无法自行表达的语义。
网络无障碍倡议组织的无障碍丰富互联网应用规范（WAI-ARIA，简称 ARIA）适用于解决无法通过原生 HTML 管理无障碍问题的领域。其工作原理是，允许您指定用于修改元素转换为无障碍树的方式的属性。我们来看一个示例。
在以下代码段中，我们使用列表项作为一种自定义复选框。CSS“checkbox”类为元素提供了所需的视觉特征。
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
尽管这适合视力正常的用户，屏幕阅读器却不会给予任何指示来说明该元素旨在作为复选框使用，因此弱视用户可能会完全错过该元素。
不过，如果使用 ARIA 属性，我们就可以为元素提供缺少的信息，以便屏幕阅读器能正确解读它。我们在以上代码中添加了 role 和 aria-checked 属性，将该元素显式标识为一个复选框，并指定它在默认情况下处于选中状态。该列表项现在将添加到无障碍树中，屏幕阅读器将把它正确地报告为一个复选框。
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA 通过更改和补充标准 DOM 无障碍树来发挥作用。
尽管 ARIA 允许我们为任何页面元素对无障碍树进行细微（乃至彻底的）修改，但那却是其唯一更改之处。ARIA 不会补充元素的任何固有行为；它不会使元素可获焦点，也不会为其提供键盘事件监听器。那仍旧是我们开发任务的组成部分。
请务必注意，不需要重新定义默认语义。无论如何使用，标准 HTML <input type="checkbox"> 元素都不需要额外的 role="checkbox" ARIA 属性就能正确声明。
同样值得注意的是，某些 HTML 元素上可以使用的 ARIA 角色和属性会受到限制。例如，不得对标准 <input
type="text"> 元素应用任何额外角色/属性。
如需了解详情，请参阅 HTML 中的 ARIA 规范。
让我们看一看 ARIA 还能提供哪些其他功能。
ARIA 能做什么？
正如您在复选框示例中所见，ARIA 可以修改现有元素语义，也可以向不存在原生语义的元素添加语义。它还可以表达 HTML 中根本不存在的语义模式，例如菜单或标签页面板。ARIA 允许我们创建的小部件型元素通常无法通过普通 HTML 实现。
- 例如，ARIA 可以添加只向辅助技术 API 公开的附加标签和说明文本。
<button aria-label="screen reader only label"></button>
- ARIA 可以表达用于扩展标准父/子连接的元素之间的语义关系，例如控制特定区域的自定义滚动条。
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- 并且 ARIA 可以使页面的某些部分具有“实时性”，让它们在发生变化时立即通知辅助技术。
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA 系统的其中一个核心层面是其角色集。在无障碍术语中，角色是指特定界面模式的简略指示器。我们可以通过任意 HTML 元素上的 role 属性使用 ARIA 提供的模式词汇表。
我们在上例中应用 role="checkbox" 时，是指示辅助技术，元素应遵循“复选框”模式。也就是说，我们可以保证它具有选中状态（选中或未选中），并且这一状态可使用鼠标或空格键进行切换，就像切换标准 HTML 复选框元素那样。
事实上，由于键盘互动在屏幕阅读器使用中占据着重要地位，因此在创建自定义 widget 时，请务必始终在与 tabindex 属性相同的位置应用 role 属性；这可确保键盘事件发送到正确的位置，并且当焦点落在某个元素上时，系统会准确传达其角色。
ARIA 规范分类介绍了 role 属性以及可与这些角色联用的关联 ARIA 属性的可接受值。这是最佳的权威信息来源，其中包含 ARIA 角色和属性如何协作，以及如何以浏览器和辅助技术支持的方式使用它们。
不过，该规范非常深奥；一个更为浅显的入门读物是 ARIA 制作实践文档，该文档探究了使用可用 ARIA 角色和属性的最佳做法。
ARIA 还提供了可对 HTML5 中提供的选项进行扩展的地标角色。如需了解详情，请参阅地标角色设计模式规范。