无障碍树简介
假设您正在构建一个仅供屏幕阅读器用户使用的界面。 在这里，您根本不需要创建任何视觉界面，只需提供足够的信息供屏幕阅读器使用即可。
您要创建的是一种描述页面结构的 API，类似于 DOM API，但您可以减少信息和节点，因为很多信息仅对视觉呈现有用。它可能看起来像这样。
这基本上就是浏览器实际呈现给屏幕阅读器的内容。浏览器会获取 DOM 树，并将其修改为对辅助技术有用的形式。我们将此修改后的树称为无障碍功能树。
您可以将无障碍功能树想象成 90 年代的旧网页：几张图片、大量链接，可能还有一个字段和一个按钮。
像这样直观地浏览页面，您会获得与屏幕阅读器用户类似的体验。界面是存在的，但它简单直接，非常类似于无障碍树界面。
大多数辅助技术都会与无障碍功能树进行交互。流程大致如下。
- 应用（浏览器或其他应用）通过 API 向辅助技术公开其界面的语义版本。
- 辅助技术可以使用通过 API 读取的信息，为用户创建替代界面。例如，屏幕阅读器会创建一个界面，用户可以在其中听到应用的语音表示。
- 辅助技术还可能允许用户以不同的方式与应用互动。例如，大多数屏幕阅读器都提供钩子，让用户可以轻松模拟鼠标点击或手指点按。
- 辅助技术通过无障碍功能 API 将用户意图（例如“点击”）传回应用。然后，应用负责在原始界面的上下文中适当地解读该操作。
对于网络浏览器，每个方向都有一个额外的步骤，因为浏览器实际上是运行在其中的 Web 应用的平台。因此，浏览器需要将 Web 应用转换为无障碍树，并且必须确保根据来自辅助技术的用户操作在 JavaScript 中触发适当的事件。
但这些都是浏览器的责任。作为 Web 开发者，我们的工作就是了解这一过程，并开发利用这一过程的网页，为用户打造无障碍体验。
为此，我们需要确保正确表达网页的语义：确保网页中的重要元素具有正确的无障碍角色、状态和属性，并指定无障碍名称和说明。然后，浏览器可以让辅助技术访问这些信息，以打造自定义体验。
原生 HTML 中的语义
浏览器可以将 DOM 树转换为无障碍树，因为 DOM 的大部分内容都具有隐式语义。也就是说，DOM 使用可被浏览器识别且可在各种平台上按预期运行的原生 HTML 元素。因此，系统会自动处理原生 HTML 元素（例如链接或按钮）的无障碍功能。我们可以通过编写 HTML 来表达页面元素的语义，从而利用这种内置的无障碍功能。
不过，有时我们会使用看起来像原生元素但实际上并非原生元素的元素。 例如，这个“按钮”根本不是按钮。
它可以通过多种方式在 HTML 中构建，下面展示了其中一种方式。
<div class="button-ish">Give me tacos</div>
如果我们不使用实际的按钮元素，屏幕阅读器就无法知道它所到达的位置。此外，我们还必须执行额外的工作，添加 tabindex，使其可供仅使用键盘的用户使用，因为按照现在的编码方式，它只能与鼠标一起使用。
我们可以使用常规 button 元素（而非 div）轻松解决此问题。
使用原生元素还有一个好处，那就是可以为我们处理键盘互动。请记住，您不必仅仅因为使用原生元素而失去华丽的视觉效果；您可以设置原生元素的样式，使其看起来符合您的要求，同时仍保留隐式语义和行为。
之前我们提到过，屏幕阅读器会读出元素的角色、名称、状态和值。通过使用正确的语义元素，角色、状态和值都得到了涵盖，但我们还必须确保元素名称可被发现。
大致分为两类：
- 可见标签，所有用户都使用可见标签来将含义与元素相关联，以及
- 替代文本，仅在不需要视觉标签时使用。
对于文本级元素，我们不需要执行任何操作，因为根据定义，它会包含一些文本内容。不过，对于输入或控件元素以及图片等视觉内容，我们需要确保指定名称。事实上，为任何非文本内容提供替代文本是 WebAIM 核对清单上的第一项。
一种方法是遵循其建议，即“表单输入具有关联的文本标签”。您可以通过两种方式将标签与表单元素（例如复选框）相关联。这两种方法都会使标签文本也成为复选框的点击目标，这对鼠标或触摸屏用户也很有帮助。如需将标签与元素相关联，请执行以下任一操作：
- 将 input 元素放置在 label 元素内
<label>
<input type="checkbox">Receive promotional offers?
</label>或
- 使用标签的
for属性并引用元素的id
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
如果复选框已正确添加标签，屏幕阅读器便可以报告该元素的角色为复选框、处于选中状态，并且名为“接收促销优惠？”。
