政务及公共服务网站必须通过WCAG 2.1 AA级审查，<main>仅能有一个且不可嵌套，否则辅助技术无法定位核心内容；<section>须含<h2>-<h6>标题才具语义；<nav>仅用于全站导航，搜索框等交互控件不得混入。
政务类或公共服务类网站必须通过 WCAG 2.1 AA 级审查，<main> 多写一个、<nav> 里塞搜索框、<section> 没标题——这些不是“小问题”，而是直接导致审核不通过的硬性否决项。
为什么 <main> 只能有一个且不能嵌套
<main> 是辅助技术定位核心内容的唯一 landmark，多一个或包在 <header> 里，NVDA、VoiceOver 就会跳过它。Lighthouse 会报 “Multiple main landmarks”，Chrome DevTools 的 Accessibility 面板里也看不到 role=“main”。
- 正确结构：
<body>→<header>+<main>+<footer>（三者并列） - 错误写法：
<header><main></main></header>或<nav><main></main></nav> - 常见陷阱：登录弹窗、顶部 banner、轮播图容器被误塞进
<main>——它们不属于“纯正文”，得移出去
<section> 不是视觉分组工具，没 <h2>–<h6> 就别用
<section> 要求有独立主题 + 显式标题，否则就是语义污染。浏览器大纲（outline）会把它当无效节点跳过，RSS 抓取、邮件推送也会失败。
- 可用：
<section><h2>办理条件</h2><p>申请人须年满18周岁...</p></section> - 禁用：
<section><div class="card-grid">...</div></section>（纯样式布局） - 替代方案：无标题的视觉分组，老实用
<div>；轮播图、网格列表、分隔线都属于这一类
<nav> 只认“全站级跳转路径”，页脚链接、面包屑、搜索框不算
<nav> 不是“有链接就包”，而是专指提供跨页面导航能力的主干路径。页脚的「关于我们」「隐私条款」本质是法律声明入口，用 <footer> + 普通列表更准确。
立即学习“前端免费学习笔记（深入）”；
- 该用：
<nav aria-label="主导航"><a href="/apply">在线申办</a><a href="/guide">办事指南</a></nav> - 不该用：
<nav><input type="search"><button>搜索</button></nav>（搜索是交互控件，不是导航） - 多个
<nav>时，必须加aria-label，否则屏幕阅读器无法区分「主导航」和「页脚导航」
检查语义是否真生效，别只看标签名
写了 <header> 不等于屏幕阅读器就认出它是页头。得验证它的 role、name、level 是否被正确暴露。
- Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”
- axe-core 插件重点跑 “landmark” 和 “heading-order” 规则
- 常见失效：
<img>的alt=""但图含关键信息；<time datetime="2026/04/29">格式错（必须是"2026-04-29"）；JS 隐藏<nav>只设display: none，没同步加aria-hidden="true"
最难的不是记住哪些标签可用，而是每次写之前问一句：这个容器在脱离 CSS 和 JS 后，还能让机器和人准确理解它的角色吗？
