GoogleChrome/web.dev项目解析：深入理解无障碍访问树(Accessibility Tree)

什么是无障碍访问树？

想象一下，你正在为屏幕阅读器用户构建一个用户界面。这种情况下，你不需要创建任何可视化UI，只需提供足够的信息供屏幕阅读器使用即可。这种结构本质上就是浏览器向屏幕阅读器呈现的内容 - 我们称之为无障碍访问树(Accessibility Tree)。

无障碍访问树是浏览器将DOM树转换为对辅助技术更有用形式的结果。你可以把它想象成一个简化的DOM API版本，去除了仅用于视觉呈现的不必要信息。

无障碍访问树的工作原理

无障碍访问树与辅助技术的交互流程如下：

1. 应用暴露语义接口：浏览器通过API向辅助技术暴露其UI的语义版本
2. 创建替代界面：辅助技术使用API读取的信息为用户创建替代界面表示
3. 提供交互方式：辅助技术允许用户以不同方式与应用交互
4. 回应用户操作：辅助技术通过API将用户意图(如"点击")传回应用

对于Web浏览器来说，这个过程还包含额外的步骤，因为浏览器实际上是运行在其内部的Web应用的平台。

原生HTML的语义价值

浏览器能够将DOM树转换为无障碍访问树，是因为DOM具有隐式语义含义。使用原生HTML元素(如链接或按钮)时，其可访问性是自动处理的。我们可以通过编写表达页面元素语义的HTML来利用这种内置可访问性。

常见错误示例

开发者有时会使用看起来像原生元素但实际上不是的元素。例如：

<div class="button-ish">给我塔可饼</div>

这种"伪按钮"对屏幕阅读器来说无法识别其角色，也无法通过键盘访问。正确的做法是使用真正的<button>元素：

<button class="button-ish">给我塔可饼</button>

原生元素不仅保留了隐式语义和行为，还能自动处理键盘交互。

元素的可访问名称

屏幕阅读器会宣布元素的角色、名称、状态和值。使用正确的语义元素可以覆盖角色、状态和值，但我们还需要确保元素名称可被发现。

名称主要分为两类：

1. 可见标签：所有用户都使用它来关联元素的含义
2. 文本替代：仅在不需要视觉标签时使用

为表单元素添加标签

为表单元素(如复选框)添加标签有两种方法：

1. 将输入元素放在label元素内：

<label>
    <input type="checkbox">接收促销优惠？
</label>

2. 使用label的for属性引用元素的id：

<input id="promo" type="checkbox">
<label for="promo">接收促销优惠？</label>

正确标记后，屏幕阅读器可以报告元素具有复选框角色、选中状态，并命名为"接收促销优惠？"。

实践建议

1. 优先使用原生HTML元素：它们自带可访问性支持
2. 确保所有交互元素都有适当的标签
3. 测试你的页面：使用屏幕阅读器浏览页面，验证角色、状态和名称是否正确宣布
4. 不要仅依赖视觉设计：即使使用原生元素，也可以通过CSS实现所需的视觉效果

通过理解无障碍访问树的工作原理并正确使用HTML语义，我们可以创建对所有用户都友好的Web体验。