语义化html是spa无障碍访问的第一道防线，main必须唯一稳定、nav与header需分层声明、动态更新须触发可访问性广播、section/article/aside边界须清晰。

语义化 HTML 不是“锦上添花”，而是 SPA 中无障碍访问失效的第一道防线——没它，ARIA 再多也救不回焦点丢失、内容静默、导航错乱。

main 标签必须唯一且稳定包裹核心视图

SPA 路由切换时，main 不能被反复销毁重建，也不能在加载态/错误态/空态下被移除。屏幕阅读器靠它定位“主内容起点”，一旦缺失或重复，用户会直接失去上下文。

• 每次路由更新后，确保新页面内容仍在原 main 元素内部替换，而非用 innerHTML = '' 清空再重写整个 main 标签
• 全局弹窗、加载遮罩、Toast 提示等非主内容，一律不要塞进 main；它们应放在 body 直接子级，并配 role="alert" 或 aria-live="polite"
• 若使用 React/Vue，避免在 main 上绑定条件渲染（如 v-if="route.name === 'home'"），改用 CSS display: none 隐藏无关区域，保持 DOM 结构稳定

nav 和 header 必须按作用域分层声明

SPA 常含多套导航：顶部主导航、侧边菜单、文章内目录、面包屑……混用 nav 或全塞进一个 header，会让屏幕阅读器无法区分“全局”和“局部”。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 顶部 Logo + 主导航栏：用 <header role="banner"><nav aria-label="主导航">...</nav></header>
• 文章页右侧 TOC（目录）：属于内容附属结构，必须放在 main 内部的 <aside></aside> 或 <nav aria-label="本文目录"></nav>，不能提至 body 级别
• 面包屑导航：单独用 <nav aria-label="面包屑"><ol>...</ol></nav>，且当前页项加 aria-current="page"

动态内容更新必须触发可访问性广播

SPA 的 DOM 局部刷新对屏幕阅读器是“静音操作”。用户看不到 loading 动画，也听不到“列表已加载完成”——除非你主动通知。

• 路由跳转后，立即聚焦新页面的 h1 或 main 入口点，例如：document.querySelector('main h1').focus()（需确保该元素有 tabindex="-1"）
• 异步加载列表/表单成功后，用 aria-live="polite" 区域播报结果，例如：<div aria-live="polite" class="sr-only">共找到 12 条匹配结果</div>
• 避免依赖纯 CSS 动画做状态反馈（如淡入），屏幕阅读器无法感知；所有状态变更需配合 ARIA 属性（aria-busy、aria-expanded）或 live region

section/article/aside 边界模糊是键盘导航断裂的根源

当 section 嵌套过深、article 被滥用为“卡片容器”、aside 里塞进操作按钮时，键盘 Tab 顺序会跳跃，屏幕阅读器会把辅助内容当成主内容朗读。

• article 应代表独立、可分发的内容单元（如一篇博客、一条新闻），不是任意视觉区块；它必须有明确标题（h1–h6）
• section 是主题分组，不是样式分隔符；避免无标题的 section，否则屏幕阅读器会跳过
• aside 只放与当前内容强相关但非必需的信息（如术语解释、参考资料），里面不应包含主操作按钮或表单控件
• 用浏览器 DevTools 的 Accessibility 面板实时检查：焦点顺序是否与 DOM 顺序一致？每个 landmark 是否有唯一 label？

最常被忽略的一点：语义化不是写完就结束的事。SPA 中 DOM 是活的，而屏幕阅读器只认结构——每次 JS 插入新节点，都要同步补上语义标签、ARIA 属性和焦点控制，否则前一秒还通顺的流程，后一秒就变成黑盒。

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