Chrome DevTools 的 Accessibility Tree 是检查 HTML5 大纲标题合理性的最准最快方式，它实时反映浏览器解析的语义结构，支持通过右键「Reveal in Accessibility Tree」查看 heading-level、ARIA 层级及 landmarks，且已取代弃用的 Outline 面板。
直接在 Chrome DevTools 中打开「Accessibility Tree」视图，是检查 HTML5 大纲标题合理性的最准、最快方式——它反映浏览器实际解析出的语义结构，不是人眼数标签的结果。
用右键菜单快速进入大纲树
在 Elements 面板中任意位置右键 → 选「Reveal in Accessibility Tree」。这个面板会按真实语义层级展开整个文档结构，标题节点带明确的 heading-level 值（如 level 1、level 2），一眼就能看出是否跳级、重复或缺失。
- 若看到
<h1></h1>后紧接<h3></h3>，且 level 值从 1 跳到 3，说明存在跳级，大纲已断裂 - 多个 level 1 节点并列出现，代表页面有多个
<h1></h1>，违反“主标题唯一”原则 - 某个
<section></section>下没有 heading-level 节点，说明它没配标题，W3C 会报 “Section lacks heading”
配合 ARIA 属性交叉验证层级
回到 Elements 面板，右键任一标题（如 <h2></h2>）→「Inspect ARIA attributes」。这里显示的 aria-level 是浏览器赋予该元素的实际语义层级，和 Accessibility Tree 中的 level 一致。
- 如果
<h2></h2>的 aria-level 显示为 3，说明它被包裹在某个<section></section>或<article></article>内部，属于子上下文——这是正常现象 - 如果
<h4></h4>的 aria-level 是 2，反而说明它被错误地降级了，可能因父容器缺失或嵌套错位 - 所有标题都应有非零、连续的 aria-level；值为 0 或空，通常意味着被
display: none、aria-hidden="true"或非法嵌套（如<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3></h3>）干扰
检查地标结构确认大纲骨架
在 Accessibility 面板顶部切换到「Landmarks」标签页。这里列出的是页面的语义分区（<main></main>、<nav></nav>、<aside></aside> 等），它们共同构成大纲的主干。
立即学习“前端免费学习笔记（深入）”；
-
<main></main>必须存在且只出现一次，其内部应包含至少一个可聚焦的标题（通常是<h1></h1>） - 多个
<nav></nav>可以存在，但必须加aria-label区分用途，否则会被合并识别 - 如果
<main></main>下方紧跟着<header></header>或<footer></footer>，而它们又被包在<div class="wrapper"> 里，这些语义块就会从 landmarks 列表中消失——因为它们不再是 <code>的直系子元素别依赖“Outline”面板，它已被弃用
旧版 Chrome 曾提供「Document Outline」面板，但该功能已在近年移除。当前唯一权威的大纲视图就是 Accessibility Tree —— 它基于 W3C Outline Algorithm 实时生成，与屏幕阅读器、Lighthouse 和搜索引擎理解结构的方式完全一致。
- 不要用正则去数
<h1></h1>～<h6></h6>出现次数，数量对不等于结构对 - 不要相信编辑器插件渲染的“大纲预览”，它依赖语言服务器，不反映运行时 DOM
- 动态内容（如 React/Vue 渲染后）必须在组件挂载完成后再打开 Accessibility Tree 查看，否则看到的是初始空结构
- 不要用正则去数
