HTML怎么做无障碍树形_html树形tree aria无障碍实现【总结】-html教程-PHP中文网

html无原生元素，需用div+aria模拟树形控件；关键在于tree/treeitem/group角色严格嵌套、aria-level显式声明、aria-expanded与aria-hidden同步控制可见性、支持home/end/方向键导航、treeitem自身聚焦且层级动态更新。

html怎么做无障碍树形_html树形tree aria无障碍实现【总结】

HTML 原生没有 <tree></tree> 元素，靠 div + ARIA 模拟树形控件时，无障碍支持不达标是常态——根本原因不是没加 role="tree"，而是节点角色、状态、键盘交互、焦点管理四者没对齐。

tree / treeitem / group 角色必须严格嵌套

常见错误是把所有节点都设成 role="treeitem"，漏掉容器语义。正确结构必须是：role="tree" 包裹若干 role="treeitem"，子节点用 role="group"（不是 role="tree"）包裹下级 treeitem。

例如：

<div role="tree" aria-label="文件目录">
  <div role="treeitem" aria-expanded="true" aria-level="1">
    <span aria-hidden="true">?</span> src
    <div role="group">
      <div role="treeitem" aria-level="2">index.html</div>
      <div role="treeitem" aria-level="2">main.js</div>
    </div>
  </div>
</div>

aria-level 必须显式声明，不能靠缩进或 CSS 推断
role="group" 是唯一合法的子容器角色；用 div 或 ul 不加 role 会破坏树形语义
每个 treeitem 必须有可聚焦的元素（如 button 或带 tabindex="0" 的 span），否则屏幕阅读器无法选中

aria-expanded 和 aria-hidden 要同步控制子节点可见性

折叠/展开状态仅靠 CSS display: none 不够，必须配合 aria-expanded="false" 和 aria-hidden="true" 双重标记，否则 NVDA/JAWS 仍会朗读隐藏节点。

anything-to-html

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

下载