政务网站必须严格遵循语义化HTML规范，否则无法通过WCAG 2.1 AA级审查；核心要求包括：仅一个包裹纯正文的<main>、表单控件必须显式绑定<label>、<section>须含标题、<article>须可独立分发、标题层级必须严格递进且唯一<h1>。
政务网站必须用语义化HTML，否则无法通过WCAG 2.1 AA级合规审查，也不是“建议”，而是硬性准入门槛。
为什么只能有一个且必须包裹纯正文
政务网站常把
- 错误示例：
<main><header>...</header><nav>...</nav><div class="ad-banner">...</div><article>《XX条例》全文</article></main> - 正确做法：全页面仅一个
<main>，且内部只含<article>、<section>等承载核心服务内容的标签，顶部导航、侧边栏、页脚全部移出 - 影响不止可访问性：搜索引擎（如百度政务搜索）会弱化
<main>内混杂内容的权重，导致政策文件排名下降
表单控件不绑定
政务网站大量使用“身份证号”“手机号”“验证码”等输入框，但常靠CSS视觉对齐+placeholder提示，没写<label for="id">或嵌套写法。屏幕阅读器根本无法告知用户该输入框用途，用户反复提交失败后只能放弃。
- 必须显式绑定：
<label for="idCard">身份证号码</label><input type="text" id="idCard">，不能只靠title或aria-label替代 - 必填项需用
required属性，而非仅靠红色星号+JS校验——后者对键盘用户不可见 - 错误提示要关联控件：
<span id="error-idCard" aria-live="polite">请输入18位身份证号</span>，并用aria-describedby="error-idCard"挂载到<input>
和不是的高级替身
很多政务站把“通知公告”列表用<section>包一层，里面每个公告又用<div>渲染——这等于白用语义标签。<section>要求有标题（<h2>–<h6>），<article>必须是可独立分发的内容单元（比如每条公告都能被RSS抓取、单独邮件推送）。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<section><h2>最新通知</h2><article><h3>关于调整社保缴费基数的通知</h3><p>...</p></article></section>
- 误用后果：屏幕阅读器生成一堆无意义的“section”节点，用户无法用6键（标题导航）快速跳转；Google 政务搜索也会忽略无标题的
<section>
- 装饰性图片必须加
alt=""，但政策文件中的图表、流程图必须有描述性alt，且优先用<figure><figcaption>包裹
标题层级断裂会让整个导航体系崩溃
政务网站常见从<h3>开始写正文，或<main>外堆了4个<h1>（比如logo、banner、栏目名、副标题）。这导致屏幕阅读器的标题导航（T键）完全失效，用户无法按层级快速定位“办理条件”“所需材料”“办理流程”三个子章节。
- 强制规则：全页面唯一
<h1>应为页面主标题（如“北京市居住证申领指南”），<main>内用<h2>起始，子节严格递进（<h2>→<h3>→<h4>）
- 禁止跳级：
<h2>后直接<h4>会导致大纲断裂，辅助技术无法构建逻辑树
- 动态加载内容（如“常见问题”折叠面板）展开后，新标题必须插入DOM并触发
aria-live，否则键盘用户看不到新增结构
最易被忽略的是：语义化不是“写对标签就完事”，而是整套内容生产流程的约束——文案编辑必须按标题层级写稿，UI设计稿要标注每个区块的语义角色，CMS后台模板必须锁定<main>范围。任何一环脱节，都会让前面所有代码努力归零。
的高级替身
很多政务站把“通知公告”列表用<section>包一层，里面每个公告又用<div>渲染——这等于白用语义标签。<section>要求有标题（<h2>–<h6>），<article>必须是可独立分发的内容单元（比如每条公告都能被RSS抓取、单独邮件推送）。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<section><h2>最新通知</h2><article><h3>关于调整社保缴费基数的通知</h3><p>...</p></article></section> - 误用后果：屏幕阅读器生成一堆无意义的“section”节点，用户无法用6键（标题导航）快速跳转；Google 政务搜索也会忽略无标题的
<section> - 装饰性图片必须加
alt=""，但政策文件中的图表、流程图必须有描述性alt，且优先用<figure><figcaption>包裹
标题层级断裂会让整个导航体系崩溃
政务网站常见从<h3>开始写正文，或<main>外堆了4个<h1>（比如logo、banner、栏目名、副标题）。这导致屏幕阅读器的标题导航（T键）完全失效，用户无法按层级快速定位“办理条件”“所需材料”“办理流程”三个子章节。
- 强制规则：全页面唯一
<h1>应为页面主标题（如“北京市居住证申领指南”），<main>内用<h2>起始，子节严格递进（<h2>→<h3>→<h4>） - 禁止跳级：
<h2>后直接<h4>会导致大纲断裂，辅助技术无法构建逻辑树 - 动态加载内容（如“常见问题”折叠面板）展开后，新标题必须插入DOM并触发
aria-live，否则键盘用户看不到新增结构
最易被忽略的是：语义化不是“写对标签就完事”，而是整套内容生产流程的约束——文案编辑必须按标题层级写稿，UI设计稿要标注每个区块的语义角色，CMS后台模板必须锁定<main>范围。任何一环脱节，都会让前面所有代码努力归零。
