spa需手动补全上下文广播：路由切换后用aria-live="polite"广播语义化提示、重置焦点至主标题或main容器、同步更新document.title、事件监听器须与dom同生命周期，缺一不可。
SPA 动态渲染导致屏幕阅读器“听不到变化”，不是 JS 没执行，而是辅助技术根本没被通知——必须手动补上这个缺失的上下文广播。
路由切换后内容变更未被屏幕阅读器感知
传统页面跳转会触发浏览器重置焦点、重读标题、广播新页面上下文；SPA 里这些全没了，只改 DOM 不等于“用户知道了”。常见现象是：用户点进 /dashboard，屏幕阅读器仍停留在上一页的朗读位置，甚至继续读旧内容。
- 必须用
aria-live区域主动广播状态。推荐在<main id="app"></main>内顶部插入一个固定<div aria-live="polite" aria-atomic="true"></div>，每次路由切换后写入语义化提示，如"已进入用户管理页面" - 避免用
aria-live="assertive"——它会打断当前朗读，造成体验割裂；polite是更安全的选择 - 不要依赖 CSS 隐藏再显示来“触发”朗读；
aria-live必须在元素存在且可见时才生效，确保该区域未被display: none或hidden阻断
新视图无焦点重置，键盘用户卡在旧节点
键盘用户按 Tab 键，焦点不会自动跳到新页面顶部，可能还停在上一页某个按钮上，导致后续操作完全错位。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 路由渲染完成后，立即调用
document.getElementById('main-heading').focus()（前提是每个视图有唯一<h1></h1>） - 若主标题不可聚焦（比如没加
tabindex="-1"），则聚焦到<main id="app"></main>容器，并确保其有tabindex="-1" - 不要用
window.scrollTo(0, 0)替代焦点控制——滚动不等于可访问性，屏幕阅读器不关心滚动位置
动态加载组件内事件监听器绑定失败
document.querySelector('#submit-btn') 在首页脚本中执行，但按钮直到 /login 页面加载完才存在，结果报 Cannot read properties of null ——这不仅让功能失效，也切断了键盘用户的交互链路。
- 事件逻辑必须和 DOM 同生命周期：把监听器代码直接写进
/pages/login.html的<script></script>块末尾，或封装成函数，在路由回调里显式调用 - 若用委托，确保委托容器（如
#app）始终存在，且事件冒泡未被stopPropagation()截断 - 表单提交、按钮点击等关键交互，务必验证
Enter键和空格键是否都能触发——很多 SPA 绑定只响应click，漏掉键盘行为
document.title 未同步更新或历史记录错乱
标题不更新，屏幕阅读器读不出当前页是什么；前进/后退时 title 不回退，用户失去导航锚点。
- 每次路由切换必须同步设置
document.title = '用户管理 - 管理后台'，不能只靠框架默认行为 - 监听
popstate（history 模式）或hashchange（hash 模式），并在回调中重新初始化aria-live提示和焦点 - 避免在路由守卫里异步修改 title（如等 API 返回后再设），title 更新必须快于 DOM 渲染完成，否则辅助技术读到的是旧值
真正难的不是加几个 ARIA 属性，而是把“页面刷新”这个隐式契约，用 JS 一行一行重新签回来——焦点、标题、朗读提示、历史堆栈，缺一不可。任何一环延迟或遗漏，对屏幕阅读器用户就是整块功能消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
