aria-level 仅适用于 role="treeitem" 元素，必须配合父容器 role="tree" 和真实 dom 嵌套使用，否则无效；其值需手动写死且严格匹配逻辑层级，不可用于标题或非树形控件。

aria-level 只能用在 role="treeitem" 上

它不是通用“层级标注器”，不能标 div、span、li（没设 role）或任何非树形控件的元素。只要没同时满足「父容器 role="tree" + 当前元素 role="treeitem" + DOM 真实嵌套」，写 aria-level="2" 就是无效代码——屏幕阅读器直接忽略，Nu HTML Checker 会警告“ARIA 属性误用”。

非标题元素要表达层级，得先变成 treeitem

比如一个自定义折叠菜单、文件浏览器、权限配置树，必须从结构上声明它是树：

anything-to-html

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

下载

• 最外层容器加 role="tree"（通常是 ul 或 div）
• 每个可展开/可聚焦的节点加 role="treeitem"
• 子级容器（如展开后的下拉列表）必须也加 role="tree"，不能只靠缩进或 CSS
• aria-level 值必须手动写死，且严格按真实逻辑层级：根节点为 aria-level="1"，其直系子项为 "2"，依此类推

别把 aria-level 当标题补丁

常见错误是给 h2 或 section 加 aria-level，以为能“修正”跳级或视觉缩进。但：

• h2 的层级由标签本身决定，aria-level 对它完全无效
• 想让 section 内部标题重置计数，用嵌套结构即可：section 里以 h2 开头，浏览器自动推导其 aria-level="1"
• 如果硬加 role="treeitem" 到 h2 上，反而破坏原生标题语义，导致朗读重复或大纲断裂

动态树里 aria-level 容易漏设

懒加载、折叠展开、服务端渲染后 hydrate 时，新插入的 treeitem 节点若没同步写 aria-level，读屏器就把它当 level 1 插入当前上下文。这意味着：

• 不能靠 class 名（如 menu-item-level-2）或 JS 自增计数器推算
• 必须遍历 DOM 向上找最近的 role="tree"，再统计中间 role="treeitem" 和 role="group" 的层数
• 同级所有 treeitem 的 aria-level 值必须一致，且为 ≥1 的正整数

真正容易被忽略的是：aria-level 不是浏览器推导出来的值，而是你必须显式写死、且与树形结构严格对齐的状态属性；它不随 DOM 深度自动变化，也不接受任何“模拟层级”的取巧写法。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！