直接打开Chrome DevTools→「Accessibility」面板→展开「Heading level」和「Landmark regions」，可直观查看标题层级是否连续、地标结构（main/nav/header）是否被正确识别；axe-core或Lighthouse会报出landmark-one-main、landmark-is-top-level、heading-order等关键问题；W3C Validator仅验证语法合法性，无法检测语义是否真实生效。
用 Chrome DevTools 的 Accessibility 面板看标题层级和地标结构
直接打开 Chrome DevTools →「Accessibility」标签页 → 展开「Heading level」，就能看到所有 h1 到 h6 是否连续、有无跳级（比如 h2 后直接出现 h4）。同时检查「Landmark regions」里是否识别出 main、nav、header 等——如果某个 nav 没出现在这里，大概率它内部没包含链接，或被 CSS/JS 干扰了语义暴露。
跑 axe-core 或 Lighthouse 检查“landmark”和“heading-order”规则
axe DevTools 插件或 Lighthouse 的「Accessibility」审计会明确报出两类关键问题：
-
landmark-one-main：页面中main缺失或重复 -
landmark-is-top-level：main被嵌套在header、nav或另一个section里 -
heading-order：标题层级断裂，比如h1后跟h3 -
region规则失败：说明article、aside等没被正确识别为独立区域
注意：axe 不会警告“section 里没标题”，但屏幕阅读器会把它当普通容器读；Lighthouse 也不会报“nav 里塞了搜索框”，可这已违背语义本意。
手动验证 main 和 article 是否名副其实
别只看标签写了没，得问内容是否匹配语义定义：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
main必须是页面唯一、不可替代的核心内容容器；删掉它，页面就失去主干 -
main的直接子元素不能是header或footer（除非是局部区块的头尾） -
article必须能独立分发：有自己标题（h1–h6）、发布时间（time[datetime]）、作者等元信息，RSS 可抓取、社交平台可引用 - 整页用户列表不是
article，每条用户记录才是；整页搜索结果也不是article，每条结果项才是
一个典型误判点：section 套着单个 button 或整页卡片流——它只是逻辑分组，不是自包含单元，工具不报错，但语义已失效。
用 W3C Validator 查结构合法性，但别指望它验语义
W3C Validator 能确认 main 是否缺失、nav 是否嵌套在 p 里、time 的 datetime 值格式是否合法（如 "2026-08-25" 有效，"2026/08/25" 无效），但它完全不关心你把 div class="menu" 改成 nav 后里面有没有真链接，也不管 article 里是不是空标题。
所以它的报错必须修，但它的“Success”不代表语义达标——只是语法过关。真正容易被忽略的是：语义是否在辅助技术中真实生效，而这只能靠人工走查 + axe + 真实屏幕阅读器测试交叉验证。
