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 无法实现的 widget 类型的元素。
- 例如，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 时，始终将 role 属性与 tabindex 属性应用在同一位置；这可确保键盘事件发送到正确的位置，并确保当焦点位于某个元素上时，可以准确传达其角色。
ARIA 规范描述了 role 属性的可能值以及可以与这些角色结合使用的关联 ARIA 属性。这是关于 ARIA 角色和属性如何协同工作以及如何以浏览器和辅助技术支持的方式使用它们的最佳来源。
不过，该规范内容非常丰富；从 ARIA 编写做法文档开始，它更容易上手，该文档探索了使用可用 ARIA 角色和属性的最佳实践。
ARIA 还提供了一些地标角色，可用于扩展 HTML5 中的可用选项。如需了解详情，请参阅地标角色设计模式规范。