怎么利用HTML的role="tree"和role="treeitem"构建可键盘操作的树形菜单-html教程-PHP中文网

树形控件仅设role="tree"和role="treeitem"远远不够，必须补全aria-expanded、aria-level、焦点管理及键盘事件处理，否则读屏器误读结构、键盘用户无法操作。

$怎么利用html的role=\$

不能只加 role="tree" 和 role="treeitem" 就算完事——缺少 aria-expanded、aria-level、焦点管理与键盘事件处理，屏幕阅读器会读错结构，键盘用户根本无法展开/折叠或跳转节点。

必须补全的 ARIA 属性和语义约束

树形控件不是“加了 role 就能用”，它是一套有严格语义契约的模式。浏览器和读屏软件依赖这些属性推断层级、状态和可交互性：

role="tree" 容器必须有 tabindex="0"，否则无法获得键盘焦点
每个 role="treeitem" 必须是 role="tree" 的直接子元素，或嵌套在 role="group" / role="treeitem" 内（但后者需自行维护 aria-level）
有子节点的 treeitem 必须设 aria-expanded="true" 或 "false"，且需同步控制子节点的 hidden 状态或 CSS display
必须用 aria-level 显式声明嵌套深度（如根节点为 aria-level="1"，子节点为 "2"），不能靠缩进或 DOM 嵌套自动推断
若节点可选中（如多选菜单），还需加 aria-selected="true" 和 tabindex="-1" 以支持方向键切换焦点

键盘操作必须手动实现的四个核心行为

HTML 不会自动响应 ArrowUp/Home 等键——你得监听 keydown 并按 WAI-ARIA Authoring Practices 规范移动焦点：

ArrowDown：移到下一个同级 treeitem，到底部则循环到第一个
ArrowUp：移到上一个同级 treeitem，到顶部则循环到最后一个
RightArrow：若 aria-expanded="false"，触发展开；若已展开，移到第一个子 treeitem
LeftArrow：若已展开，收起；若已收起，移到父 treeitem；根节点收起时无反应
Home/End：分别聚焦第一个/最后一个可聚焦的 treeitem

注意：所有焦点移动后，必须调用 element.focus()，并确保目标元素有 tabindex="-1"（非首项）或 tabindex="0"（当前活动项）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

常见错误：用 div 套 div 模拟树，却忽略可访问性链路

很多人写这样的结构：

<div role="tree">
  <div role="treeitem">文件</div>
  <div role="group">
    <div role="treeitem">新建</div>
    <div role="treeitem">打开</div>
  </div>
</div>

问题在于：role="group" 不是合法的 tree 子元素，会导致读屏器跳过整个子块。正确做法是：

用 <ul><li role="treeitem">...</li></ul> 包裹子节点（ul 本身不加 role，仅作样式容器）
或让子 treeitem 直接作为父 treeitem 的后续兄弟节点，并用 aria-level 和 aria-posinset/aria-setsize 表达关系
避免用 display: none 隐藏子节点——应改用 hidden 属性或 aria-hidden="true" + tabindex="-1" 组合，否则键盘焦点仍可能落到不可见元素上

实际开发中容易被跳过的细节

最常漏掉的不是逻辑，而是状态同步和边界处理：

点击展开按钮时，只改了 aria-expanded，但没同步更新子节点的 hidden 属性 → 键盘用户仍能 tab 到隐藏项
用 querySelectorAll('[role="treeitem"]') 获取所有节点，但没过滤掉 aria-hidden="true" 的项 → Home 键跳到不可见节点
没监听 click 和 keydown 双事件处理展开/折叠 → 触摸设备或鼠标用户无法操作
动态增删节点后，没重置 aria-setsize 和 aria-posinset → 读屏器报“第 5 项（共 3 项）”这类矛盾信息