用chrome devtools的accessibility tree可快速检查html大纲：右键节点→“reveal in accessibility tree”，重点查孤立、无标题、–跳级或嵌套违规；w3c报“section lacks heading”是因语义缺失而非样式问题，须确保每个分区含显式标题；地标嵌套错误（如包在内）需按规范修正；动态内容须在运行时验证。
怎么用浏览器 DevTools 快速检查 HTML 大纲是否断裂
大纲（outline）不是靠人眼数 <h1></h1> 到 <h6></h6> 推出来的，而是浏览器根据语义标签嵌套和标题层级自动生成的逻辑结构。一旦出现 <header></header> 里嵌 <main></main>、<section></section> 没包标题、或 <h2></h2> 直接跟在 <h4></h4> 后面，大纲就会跳级或断裂——屏幕阅读器和 Lighthouse 的“Heading levels”审计项就由此而来。
- 打开 Chrome DevTools → Elements 面板 → 右键任意节点 → “Reveal in Accessibility Tree”，直接看浏览器生成的大纲树
- 重点检查：是否有孤立的
<h2></h2>（父容器没<section></section>或<article></article>）、<main></main>下没有顶层<h1></h1>、多个<h1></h1>出现在同一页面 - 注意：
<h1></h1>不一定非得在<main></main>里，但<main></main>内必须有且仅有一个可聚焦的标题（通常是<h1></h1>或带aria-labelledby的元素）
W3C Validator 为什么报 “Section lacks heading” 却渲染正常
这个错误不是样式问题，而是语义缺失：W3C 要求每个 <section></section>、<article></article>、<nav></nav>、<aside></aside> 等分区元素，必须包含一个显式标题（<h1></h1>–<h6></h6>），否则无法被辅助技术识别为独立内容块。即使你用 CSS 把标题隐藏了，只要 DOM 里没它，验证就失败。
- 常见误写：
<section><div class="card">...</div></section>—— 缺标题，应改为<section><h2>卡片标题</h2> <div class="card">...</div></section> - 若标题确实不需要视觉呈现，用
<h2 class="visually-hidden">辅助标题</h2>+ CSS.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } - 别用
<div role="region" aria-label="xxx"></div>替代 —— 它不参与大纲生成，只提供区域描述，不能替代标题语义
axe 插件检测出 “Landmark is not contained in another landmark” 怎么修
这是地标（landmark）嵌套违规，典型如 <nav></nav> 放进 <header></header> 里（合法），但 <main></main> 套在 <section></section> 里（非法）。HTML 规范明确禁止 <main></main> 作为任何其他地标元素的子元素，否则会破坏其“页面唯一主内容”的语义定位。
- 错误写法：
<section><main>...</main></section>→ 直接删掉外层<section></section>，让<main></main>成为的直系子元素 - 正确嵌套关系只有：
<header></header>/<footer></footer>可包裹<nav></nav>；<article></article>和<section></section>可互嵌；<main></main>必须平级于<header></header>、<footer></footer>、<nav></nav> - 如果真需要分组主内容，用
<section></section>包在<main></main>内部，而不是反过来 ——<main><section><h2>子模块</h2>...</section></main>
DOM 嵌套过深如何影响大纲生成与性能
大纲算法本身不关心 DOM 深度，但深度嵌套会放大语义错位的风险：比如一个 5 层深的 <div><div><div><div><h3>标题</h3></div></div></div></div>，既无法被正确归入任何 <section></section> 上下文，又会让 axe 和 W3C Validator 因找不到父地标而报“heading outside landmark”。更实际的问题是，滚动时强制重排成本飙升。
- Chrome DevTools → Layers 面板里观察：超过 4 层嵌套的节点常触发“Layout”图层，尤其当内部有
position: relative或transform时 - 修复优先级：先用
<section></section>/<article></article>替代无意义<div> 堆叠；再用 Flex/Grid 把 3 层布局扁平化；最后检查是否所有标题都有明确归属容器 <li>特别注意：JS 动态插入的结构（如框架渲染结果）不会被 W3C Validator 检测，但会被 axe 和 DevTools 的 Accessibility Tree 实时反映 —— 所以必须在运行时验证</li> 实际修复时，最易被忽略的是：大纲不是静态快照，它随 DOM 变化实时重算；而验证工具只看初始 HTML。动态内容上线前，务必在真实交互路径中用 DevTools 的 Accessibility Tree 手动走一遍。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
