语义化HTML在政务网站可访问性建设中的运用

政务网站必须严格遵循语义化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>范围。任何一环脱节，都会让前面所有代码努力归零。