aria-level仅适用于role="treeitem"，必须同时满足父容器为role="tree"、当前元素为role="treeitem"且dom真实嵌套；html标题层级应使用原生–，不可混用。
aria-level 只适用于 role="treeitem"，不用于 <h1></h1> 到 <h6></h6>
直接在 <h2></h2> 上写 aria-level="2" 是无效且被忽略的。HTML 标题的层级语义由标签本身定义，aria-level 是 ARIA 规范中专为树状控件（tree widget）设计的状态属性，仅在元素已设置 role="treeitem" 时才有意义。浏览器和屏幕阅读器不会从 aria-level 推断标题重要性，也不会用它修正 <h1></h1>–<h6></h6> 的语义错误。
正确使用 aria-level 的前提条件
必须同时满足以下三点，aria-level 才会被辅助技术识别：
- 父容器有
role="tree" - 当前元素有
role="treeitem" - 该元素是嵌套结构中的一部分（即存在明确的父子关系 DOM 层级）
示例有效结构：
- 根节点
- 子节点
- 另一个子节点
注意：仅靠缩进或 CSS 不构成“嵌套结构”，DOM 必须真实嵌套（如子 <ul></ul> 在父 <li> 内），且该子 <ul></ul> 还需加 role="group" 才算完整树形语义链。
常见误用与后果
把 aria-level 当作“视觉缩进计数器”或“标题等级补丁”是高频错误：
- 在
<div> 或 <code><p></p>上硬加aria-level="3"，但没设role="treeitem"→ 屏幕阅读器完全静默 - 给
<h3></h3>同时加role="treeitem"和aria-level="3"→ 破坏原生标题语义，辅助技术可能朗读两次或冲突（既当标题又当树项） - 手动维护
aria-level值但未同步更新 DOM 嵌套深度 → 数值与实际结构错位，导致“第5层节点显示在第2层位置”类误导
替代方案：标题层级请用原生标签，树结构才用 aria-level
如果目标是表达文档大纲（如文章小节、帮助文档目录），唯一可靠方式是严格使用 <h1></h1>–<h6></h6> 并保持逻辑嵌套顺序；如果目标是可交互的折叠列表（如文件浏览器、权限配置树），才进入 ARIA tree 模式，并用 aria-level 配合 role="treeitem" 和 aria-expanded 等协同工作。两者不可混用——这不是兼容性取舍，而是语义模型的根本差异。
最容易被忽略的一点：当你在 JS 中动态插入树节点时，aria-level 值必须由代码实时计算并写入，不能靠 CSS 类名或 data 属性自动映射；否则键盘导航和焦点管理会立刻失效。
