ARIA 和非原生 HTML 语义简介
到目前为止，我们一直建议您使用原生 HTML 元素，因为它们可以帮助您集中注意力、 键盘支持和内置语义，但有时简单的 布局和原生 HTML 就无法发挥作用。例如，目前 基于弹出式菜单这一常见界面结构的标准化 HTML 元素。诺 是否存在可提供“ 用户需要尽快了解此问题”。
然后，在本课程中，我们将探索如何表达 HTML 无法表达的语义 来表达自身的情绪。
网络无障碍倡议组织的无障碍丰富互联网应用 规范（WAI-ARIA，或仅仅 ARIA）适用于连接存在无法管理的无障碍功能问题的领域 。它的工作原理是允许您指定 属性来修改 元素转换为无障碍树的方式。我们来看一个 示例。
在以下代码段中，我们将列表项用作一种自定义复选框。通过 CSS“复选框”类为元素提供了所需的视觉特征。
<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 元素对
角色和属性。例如，不得对标准 <input
type="text"> 元素应用任何其他角色/属性。
请参阅 HTML 中的 ARIA 规范 。
让我们看看 ARIA 还能提供哪些其他功能。
ARIA 可以做什么？
正如您在复选框示例中所看到的，ARIA 可以修改现有元素语义 或者为没有原生语义的元素添加语义。它还可以 表达 HTML 中根本不存在的语义模式，如菜单或标签页 面板。通常，ARIA 允许我们创建不可能 替换成纯文本。
- 例如，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 系统的核心部分之一就是其角色的集合。角色
相当于特定界面的简略指示器
模式。我们可以通过 role 使用 ARIA 提供的模式词汇表，
属性。
在上一个示例中应用 role="checkbox" 时，我们告诉
一种辅助技术，要求元素在“复选框”之后模式。这样
就是，我们要保证其状态
并且可以使用鼠标或空格键切换状态
就像标准的 HTML 复选框元素一样
事实上，由于键盘交互功能在屏幕阅读器中非常醒目
因此在创建自定义 widget 时，务必要确保
role 属性始终与 tabindex 在同一位置应用
属性；这样可确保键盘事件转到正确的位置，
焦点位于元素上，其角色会准确传达。
ARIA 规范描述了
role 属性和相关 ARIA 的可能值分类
可与这些角色结合使用的属性。这是最好的
有关 ARIA 角色和属性工作方式的权威信息来源
以及如何以受浏览器和
辅助技术
不过，该规范非常密集。比较容易理解的入手点是 ARIA 创作做法文档 ，其中探讨了使用可用 ARIA 角色和 属性。
ARIA 还提供了地标角色，扩展了 HTML5 中的可用选项。请参阅 地标角色设计 模式 。