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