用chrome devtools直接查看文档大纲可读性：先在elements面板右键语义标签→“scroll into view”定位结构，再切accessibility面板展开“heading level”查跳级；配合axe-core插件审计landmark和heading-order规则，并用document.queryselectorall验证关键标签存在性与唯一性。
用浏览器 DevTools 直接看文档大纲是否“可读”
打开 Chrome DevTools →「Elements」面板 → 右键任意语义标签（如 <header></header>、<main></main>）→「Scroll into view」，快速定位结构；再切到「Accessibility」面板 → 展开「Heading level」，观察标题层级是否连续、有无跳级（比如 <h1></h1> 后直接是 <h4></h4>）。如果大纲树里出现大量孤立的 <div> 或缺失 <code><main></main>，说明语义骨架已断裂。
运行 axe-core 插件查 landmark 和 heading-order 规则
axe-core 是目前最贴近真实辅助技术行为的审计工具。安装插件后点击页面右上角图标 →「Analyze」，重点关注两类失败项：
- 「landmark-one-main」：表示页面中没有
<main></main>，或存在多个<main></main> - 「heading-order」：指出标题嵌套逻辑错误，例如
<section></section>内没配<h2></h2>就直接塞<p></p> - 「region」类警告：提示
<nav></nav>缺少aria-label，或<aside></aside>被误用于页脚版权栏
这些不是样式警告，而是机器可感知的结构性缺陷——搜索引擎和屏幕阅读器会据此降权或跳过内容。
用 document.querySelectorAll 验证关键标签是否存在且唯一
在 Console 中执行这行代码：
document.querySelectorAll('header, nav, main, article, aside, footer').length结果应 ≥ 1，但更关键的是细分验证：
-
document.querySelector('main')必须返回一个节点，且不能是null -
document.querySelectorAll('h1').length === 1—— 多个<h1></h1>会稀释 SEO 主题权重 -
document.querySelectorAll('article').forEach(a => console.assert(a.querySelector('h2,h3'), 'article missing heading'))—— 每个<article></article>必须自带标题，否则无法被 RSS 抓取或社交平台引用
这些断言不依赖外部工具，是构建流程中可集成的最小化检查点。
把 HTML 片段单独保存为文件，测试能否脱离上下文理解
这是判断 <article></article> 和 <section></section> 是否误用的黄金标准：
- 复制一个
<article></article>块（含内部所有子元素）→ 新建 .html 文件 → 用浏览器打开 → 能否独立读懂这是什么内容？能 → 合规 - 同理操作一个
<section></section>：如果删掉它所在的父页面，只剩这个区块，用户不知道这是“文章的评论区”还是“产品参数表”，就说明它其实该是<article></article>或甚至只是<div> <li>特别注意 CMS 输出的长文：整篇包进一个 <code><section></section>是常见错误；正确做法是用<article></article>包全文，内部小节再用<section></section>+<h2></h2>
语义是否成立，不取决于你写了什么标签，而取决于它被抽离后，还能不能“自己说话”。这点最容易被忽略，也最难靠工具自动发现。
