treeview 的 role 属性不能只写 role="tree"，因为屏幕阅读器需完整的 aria 树形语义链（role="tree"/"treeitem"/"group"）、aria-expanded/aria-hidden 状态同步、键盘导航支持及真实 dom 嵌套结构才能正确识别层级、折叠状态和交互逻辑。
Treeview 的 role 属性为什么不能只写 role="tree"
屏幕阅读器（如 NVDA、VoiceOver）识别 Treeview 依赖的是完整的 ARIA 树形语义链，不是单个 role 就能触发朗读逻辑。只加 role="tree" 到容器上，子节点若没配对的 role="treeitem" 和 role="group"（用于展开/折叠容器），阅读器会当成普通列表或 div 处理，跳过层级关系、折叠状态、选中反馈等关键信息。
实操建议：
- 根容器必须设
role="tree"，且推荐加上aria-label或aria-labelledby明确说明用途，比如aria-label="导航菜单" - 每个可交互节点用
role="treeitem"，不可嵌套其他role="tree"—— 子树要放在该treeitem内部的role="group"里 -
role="group"必须直接作为treeitem的子元素，且仅包裹其子treeitem；多层嵌套时，每层都需group → treeitem配对 - 避免在
treeitem上同时用role="button"或role="link"—— 会覆盖树形语义，导致阅读器忽略层级
如何让屏幕阅读器正确朗读展开/折叠状态
单纯靠 CSS display: none 或 visibility: hidden 隐藏子节点，阅读器仍可能把它们读出来（尤其当 DOM 未移除时）。真正有效的状态同步靠 aria-expanded 和 aria-hidden 联合控制。
实操建议：
- 为每个含子节点的
treeitem添加aria-expanded="true"或"false"，初始值必须与视觉状态一致 - 对应子
group容器需同步设aria-hidden="false"（展开）或"true"（折叠）—— 注意：不能只靠 CSS 隐藏，aria-hidden才是阅读器的“开关” - JavaScript 切换状态时，必须同时更新两个属性：
aria-expanded和aria-hidden，否则会出现“读到不可见内容”或“不读已展开内容”的错乱 - 不要用
display: none控制group的显隐 —— 它会让部分阅读器跳过该节点；改用visibility: hidden+position: absolute或直接靠aria-hidden管理
键盘导航支持不到位，阅读器就无法模拟用户操作
Treeview 的键盘操作（方向键遍历、Enter 展开、Space 切换选中）不是可选功能，而是 ARIA 树形规范的强制要求。如果 JS 没实现这些行为，即使语义写全了，阅读器也会降级为线性朗读，丢失父子跳转能力。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
- 所有
treeitem必须可聚焦：加tabindex="-1"（非按钮/链接类元素默认不可 tab 进入） - 用 JS 监听
ArrowUp/ArrowDown实现同级跳转；ArrowRight展开当前项（若未展开）；ArrowLeft折叠（若已展开） - 为展开/折叠操作提供明确反馈：切换
aria-expanded后，调用element.setAttribute('aria-live', 'polite')让阅读器播报“已展开”或“已折叠” - 选中状态用
aria-selected="true"，并确保视觉样式（如背景色）与之同步 —— 阅读器会读出“已选中”，否则用户无法确认操作结果
为什么用了 aria-owns 反而破坏 Treeview 朗读
有人试图用 aria-owns 把分散在 DOM 不同位置的 treeitem “强行组织”成树，这违反 ARIA 规范。阅读器会忽略这种跨结构关联，或报错后静默降级，最终树形结构完全不可读。
实操建议：
- 放弃
aria-owns拼接 Treeview —— 树形结构必须由真实嵌套 DOM 表达：tree → treeitem → group → treeitem → ... - 如果后端渲染导致节点无法物理嵌套（如 CMS 输出扁平列表），应在 JS 初始化阶段重建 DOM 结构，而不是靠 ARIA “打补丁”
- 避免在
tree容器上设置aria-activedescendant以外的aria-*属性（如aria-controls），干扰阅读器对树焦点流的判断
Treeview 的可访问性不取决于标签数量，而在于角色、状态、焦点、DOM 结构四者严格对齐。漏掉任意一环，阅读器就会“视而不见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
