Web 可访问性树（Accessibility Tree） 基础概念 Web 可访问性树是浏览器在解析网页后生成的 结构化语义表示 ，专为辅助技术（如屏幕阅读器）提供内容接口。它与渲染树（Render Tree）类似，但仅包含对可访问性有用的元素和属性，例如按钮角色、文本标签、状态描述等。 生成过程 步骤1 ：浏览器将 HTML 转换为 DOM 树（Document Object Model）。 步骤2 ：结合 CSS 生成渲染树，排除不可见元素（如 display: none ）。 步骤3 ：从渲染树中提取语义信息，构建可访问性树： 保留具有可访问性意义的元素（如表单控件、标题、段落）。 忽略纯装饰性元素（如无语义的 <div> ）。 注入 ARIA 属性（如 role="button" 、 aria-label ）以补充原生语义。 关键属性与角色 可访问性树中的每个节点包含： 角色（Role） ：定义元素类型（如 heading 、 checkbox ）。 名称（Name） ：通过标签（ <label> ）、ARIA 属性或内容计算得出。 状态（State） ：如 checked （复选框）、 expanded （下拉菜单）。 值（Value） ：如滑块组件的当前数值。 描述 ：通过 aria-describedby 提供额外说明。 与辅助技术的交互 屏幕阅读器通过操作系统提供的 可访问性 API （如 Windows 的 UI Automation、macOS 的 NSAccessibility）读取可访问性树。例如： 当用户聚焦到按钮时，API 返回其角色为“按钮”、名称为“提交”。 动态更新（如 AJAX 内容变化）会触发可访问性树更新，通知辅助技术刷新内容。 开发中的优化实践 语义化 HTML ：使用 <button> 而非 <div onclick> ，确保自动生成正确的可访问性树。 ARIA 补充 ：在复杂组件中通过 aria-* 属性明确角色和状态（如 aria-live="polite" 提示实时更新）。 测试工具 ：通过浏览器开发者工具的“可访问性检查器”直接查看可访问性树结构，验证节点属性是否准确。