可访问性树生成 - 解析HTML ARIA结构

可访问性树是浏览器基于DOM树生成的一种简化表示，专门供辅助技术（如屏幕阅读器）使用。它剔除了纯表现性元素，保留了有语义含义的节点，并为每个节点附加了角色（Role）、可访问名称（Accessible Name）、状态（States）和属性（Properties）等信息。可以理解为DOM的"语义精华版"。

ARIA角色分为六大类：
① 地标角色（Landmark）：banner、navigation、main、complementary、contentinfo、search、form、region — 帮助用户快速导航页面区域。
② 小部件角色（Widget）：button、link、checkbox、radio、slider、tab、dialog、tooltip等 — 交互式UI组件。
③ 文档结构角色：heading、article、list、listitem、img、table、row、cell等 — 组织内容结构。
④ 抽象角色：仅用于ARIA规范内部，不应在代码中使用。
⑤ 窗口角色：dialog、alertdialog。
⑥ 实时区域角色：alert、log、status、marquee、timer。

根据W3C规范，可访问名称的计算优先级如下（从高到低）：
1. aria-labelledby — 引用页面中其他元素的文本作为名称（优先级最高）。
2. aria-label — 直接指定的文本标签。
3. HTML标签关联 — 如 <label for="..."> 关联表单控件。
4. 内部文本内容 — 元素内部的可见文本。
5. title属性 — 作为最后的备选（优先级最低）。
注意：aria-label会覆盖原生语义，建议优先使用原生HTML标签。

aria-label：直接在元素上提供一个字符串作为可访问名称，适合没有可见标签的场景（如仅图标的按钮）。
aria-labelledby：通过ID引用页面中其他元素的文本内容，适合用已有可见文本作为标签（如用标题给区域命名）。
两者同时存在时，aria-labelledby优先级更高。最佳实践是尽量复用已有可见文本，避免信息不一致。

role="presentation" 和 role="none"（两者等价）会移除元素的语义角色，使其在可访问性树中变为"不可见"。但它不会隐藏子元素（除非子元素也指定了presentation）。常用于：
• 布局用的表格（<table role="presentation">）
• 纯装饰性图标
• 清除多余语义的容器
与之对应，aria-hidden="true" 会完全隐藏元素及其所有子元素。

在Chrome浏览器中：
① 按 F12 打开DevTools
② 选择 Elements 面板
③ 在右侧找到 Accessibility 子面板（如未显示，点击 » 更多面板）
④ 勾选 "Enable full-page accessibility tree"
⑤ 即可查看完整的可访问性树及每个节点的详细信息
这是前端开发者调试可访问性的核心工具之一。

DOM树包含页面所有HTML元素（包括div、span等无语义元素），是完整的文档结构。
可访问性树是DOM的筛选和重组版本：
• 剔除了纯表现性元素
• 合并了某些元素（如label与对应控件）
• 添加了ARIA增强的语义信息
• 为每个节点附加了角色、名称、状态
两者是并行存在的，DOM更新会触发可访问性树的同步更新。

常见问题包括：
• 图片缺少alt属性 — 屏幕阅读器无法描述图片内容
• 空链接/空按钮 — 没有可访问名称的交互元素
• 缺少地标角色 — 页面缺少banner、main、navigation等地标
• 表单控件无标签 — 输入框没有关联label
• 颜色对比度不足 — 文字与背景对比度低于4.5:1
• 使用正面tabindex — 破坏自然的Tab导航顺序
• aria-hidden误用 — 隐藏了应该可访问的内容