必须唯一且仅包裹核心内容，否则屏幕阅读器跳转会失效；滥用会污染文档大纲，导致辅助技术无效遍历，修复需大量JS补丁，牵涉CSS、JS、测试及CI/CD全链路重构。

必须唯一且只包裹核心内容，否则屏幕阅读器跳转会失效；

和

滥用会导致文档大纲污染，让辅助技术多做无意义遍历——这不是“写得规范一点”的问题，而是直接影响可访问性修复成本的关键杠杆。

为什么修复成本会飙升？

可访问性问题一旦在结构层埋下，后期补救往往要靠 JS 动态注入 ARIA 属性、监听焦点事件、手动模拟语义行为。这些补丁逻辑： - 无法覆盖所有交互路径（比如打印、RSS 抓取、离线缓存） - 与框架生命周期耦合（如 React 中组件卸载后 ARIA 状态残留） - 每次 DOM 变更都要同步更新状态，测试覆盖率难保障 - 多人协作时，没人敢删这段“看起来有用但不知干啥”的 JS

放错位置的典型后果

常见错误场景： - Next.js 布局文件里套一层

，子页面又渲染一个 → 屏幕阅读器按 M 键只识别第一个，后续内容被跳过 -

包含顶部 banner + 左侧菜单 + 正文 → 读屏用户必须听完整页才能定位到操作区 - CMS 输出 HTML 时自动给每个模块加

→ 导出归档后十年都不可读

正确做法只有一个：

全局唯一，且只包裹用户真正要阅读或操作的部分（如商品列表、表单主体、文章正文），其余一律用

、

、

或

。

和

的误用陷阱

判断是否该用

，只看两点： - 是否自带

–

标题 - 是否能被 RSS 抓取或邮件单独推送（即是否具备独立分发价值）

反例： -

欢迎关注我们

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

→ 无标题、不可分发、纯装饰 - 用

替代

只为加个边框 → 屏幕阅读器生成冗余导航节点，用户被迫听十次“section”才能进正文 - 表单区域写成

而非

→ 缺失提交语义，JS 补 aria-labelledby 后仍无法触发原生 form 提交逻辑

最容易被忽略的结构性断层

标题层级断裂不是样式问题，是语义树断裂： - 页面从

开始，但

外堆了三个

→ 文档大纲直接崩坏，SEO 权重分散 - 小节用了

，主内容还没出现

→ 屏幕阅读器无法建立层级锚点，用户失去上下文 - 写成纯文本 “2026年7月7日” → 机器无法提取时间戳，后续自动化处理全失效

结构语义一旦写错，修复不是改一行标签的事——它牵扯到 CSS 选择器重写、JS 逻辑重判、测试用例重编排，甚至影响 CI/CD 中的无障碍扫描规则配置。真正省成本的方式，是在写第一行 HTML 时就选对标签。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！