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

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

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

别把 aria-level 当标题补丁

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

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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 深度自动变化，也不接受任何“模拟层级”的取巧写法。