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），一眼就能看出是否跳级、重复或缺失。

• 若看到
  后紧接
  ，且 level 值从 1 跳到 3，说明存在跳级，大纲已断裂
• 多个 level 1 节点并列出现，代表页面有多个
  ，违反“主标题唯一”原则
• 某个
  下没有 heading-level 节点，说明它没配标题，W3C 会报 “Section lacks heading”

配合 ARIA 属性交叉验证层级

回到 Elements 面板，右键任一标题（如

）→「Inspect ARIA attributes」。这里显示的 aria-level 是浏览器赋予该元素的实际语义层级，和 Accessibility Tree 中的 level 一致。

• 如果
  的 aria-level 显示为 3，说明它被包裹在某个
  或
  内部，属于子上下文——这是正常现象
• 如果
  的 aria-level 是 2，反而说明它被错误地降级了，可能因父容器缺失或嵌套错位
• 所有标题都应有非零、连续的 aria-level；值为 0 或空，通常意味着被 display: none、aria-hidden="true" 或非法嵌套（如
  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
  ）干扰

检查地标结构确认大纲骨架

在 Accessibility 面板顶部切换到「Landmarks」标签页。这里列出的是页面的语义分区（

、

、

等），它们共同构成大纲的主干。

• 必须存在且只出现一次，其内部应包含至少一个可聚焦的标题（通常是
  ）
• 多个
  可以存在，但必须加 aria-label 区分用途，否则会被合并识别
• 如果
  下方紧跟着
  或
  ，而它们又被包在
  里，这些语义块就会从 landmarks 列表中消失——因为它们不再是 的直系子元素

  别依赖“Outline”面板，它已被弃用

  旧版 Chrome 曾提供「Document Outline」面板，但该功能已在近年移除。当前唯一权威的大纲视图就是 Accessibility Tree —— 它基于 W3C Outline Algorithm 实时生成，与屏幕阅读器、Lighthouse 和搜索引擎理解结构的方式完全一致。

  • 不要用正则去数
    ～
    出现次数，数量对不等于结构对
  • 不要相信编辑器插件渲染的“大纲预览”，它依赖语言服务器，不反映运行时 DOM
  • 动态内容（如 React/Vue 渲染后）必须在组件挂载完成后再打开 Accessibility Tree 查看，否则看到的是初始空结构

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