必须全页唯一且只包裹核心内容，否则屏幕阅读器会跳过正文；多个main导致读屏工具仅识别第一个，后续内容被忽略；article/section非视觉容器，需自带标题且可独立分发；标题层级断裂使大纲导航失效，全页仅一个h1且严格递进。
<main></main> 必须全页唯一且只包裹用户真正要操作/阅读的内容，否则屏幕阅读器按 M 键跳转时会定位失败或跳过正文——这不是“读不出来”，而是“读错重点”。
为什么多个 <main></main> 会让可访问性彻底失效
真实项目里，Next.js 布局组件自动套一层 <main></main>，子页面又渲染一个，DOM 中就出现两个。NVDA、VoiceOver 等主流读屏工具只认第一个，后续所有内容都绕过。更隐蔽的是：半年后加个弹窗、广告 banner 或埋点浮层，开发随手塞进已有的 <main></main> 里，辅助技术就把促销文案当成核心商品描述来播报。
常见错误现象：
-
<main></main>包含顶部 banner、左侧导航栏、底部版权栏 - 页面中存在
<main></main>+<main></main>（布局组件 + 页面组件各一个） -
<main></main>内嵌<header></header>、<nav></nav>、<aside></aside>等非主内容区块
<section></section> 和 <article></article> 不是 <div> 的升级版
<p><code><section></section> 是为「有标题的逻辑分段」设计的，不是视觉分组容器；<article></article> 表示可独立分发的内容单元（如一篇博客、一条新闻、一个评论）。滥用会导致屏幕阅读器生成大量空节点，用户无法用 heading 快捷键跳转，反而增加无效遍历负担。
判断是否该用 <section></section>：
- 这块内容是否自带
<h2></h2>–<h6></h6>？ - 能否被 RSS 抓取或邮件推送？
- 是否属于已有语义标签范畴（比如页脚该用
<footer></footer>而非<section></section>）？
错误写法：<section><p>欢迎关注我们</p></section> —— 无标题、不可分发、无结构意义。
标题层级断裂比不用语义标签更危险
标题不是用来调样式的，它是整个页面的骨架。一旦从 <h2></h2> 开始，或者 <main></main> 外堆了三个 <h1></h1>，所有基于大纲的导航（包括屏幕阅读器的 heading 列表、Chrome 的“文档结构”面板）就彻底失效。后期补救成本极高：不仅要改 HTML，还得同步更新 JS 焦点管理、CSS 选择器、甚至 SEO 监控规则。
必须遵守：
- 全页仅一个
<h1></h1>（代表产品核心主题） - 其余严格递进，不能跳级（如
<h2></h2>后直接<h4></h4>） - 小节用了
<h3></h3>，但“产品详情”主模块还没出现<h2></h2>→ 这是真实高频错误
检查方式：打开 Chrome DevTools → Elements → 右键任意标题 → “Inspect Accessibility Properties”，看 computed outline 是否连贯。
最容易被忽略的不是“该不该用语义标签”，而是“用了之后内容是否持续匹配其含义”——产品迭代中新增的模块、A/B 测试弹窗、第 N 版运营 banner，只要塞进 <main></main> 或混进 <section></section>，可访问性就立刻退化。结构一旦污染，修复成本远高于初始规范。
