SPA路由跳转后必须用JavaScript手动聚焦新页面主标题，目标元素需设tabindex="-1"，同时同步更新document.title并用aria-live通知屏幕阅读器，否则键盘和读屏用户将无法感知页面变化。
路由切换后焦点没落到新内容上，不是“体验优化问题”，而是可访问性失效的明确信号——屏幕阅读器用户和键盘用户会卡在旧位置，根本不知道页面已变。
SPA路由跳转后怎么让焦点落到新页面主标题
浏览器不会在 JS 驱动的 DOM 替换后自动重置焦点，autofocus 属性在动态渲染中完全无效，必须用 focus() 手动干预。
- 目标元素（如
<h1 id="main-heading">）必须带tabindex="-1"，否则.focus()调用静默失败 - 别聚焦裸
<h1>：它默认不可聚焦；推荐写成<h1 id="main-heading" tabindex="-1"> - 若标题是框架组件动态挂载的（如 Vue 的
v-if或 React 的条件渲染），得等 DOM 真正就位再聚焦：
React 用useLayoutEffect，Vue 用onMounted+nextTick，原生 JS 用requestAnimationFrame(() => el.focus()) - 绝对不要用
scrollIntoView()替代聚焦——它只滚动，不触发屏幕阅读器播报
为什么 document.title 同步不能交给框架或模板
标签页标题不更新，等于剥夺了用户通过任务栏快速识别当前页的能力，也导致书签混乱。纯 JS SPA 没有服务端参与，这行代码必须手写、且每次路由处理函数里都执行。
- 写法必须是
document.title = "订单详情 - 我的商城"，不能依赖<title>模板或框架的 title 插件 - history.state 为空时（比如用户直接输入 URL 访问），仍要从
location.pathname或路由参数解析出语义化 title，不能跳过 - title 字符串建议按信息重要性从左到右排列，因为浏览器标签页通常从右侧截断
如何让屏幕阅读器感知到“页面已切换”
内容变了但读屏软件没反应，就是“静音切换”。这不是视觉问题，是 ARIA 通知缺失。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 在根容器（如
<main id="app">）里加一个常驻的<div aria-live="polite" aria-atomic="true"></div> - 路由匹配成功后，往这个区域写文本：
liveRegion.textContent = "已进入订单详情页面" - 禁用
aria-live="assertive"：它会打断当前播报，只适合错误提示，不适合导航 - 确保该
<div>没被display: none、visibility: hidden或aria-hidden="true"拦截，否则辅助技术直接忽略
模态框开闭时焦点为什么总失控
弹窗出现后焦点还在背景按钮上，或关闭后焦点丢失，本质是没做焦点陷阱（focus trap）和焦点回退（focus return）。
- 打开前记录原焦点：
const prevActive = document.activeElement；关闭后显式调用prevActive?.focus() - 若原元素已被销毁（如路由切换导致 DOM 替换），fallback 到
document.getElementById('main-heading')?.focus()或document.getElementById('app')?.focus() - 禁用背景不能只靠
pointer-events: none——它不阻止键盘访问；必须用inert属性，或遍历所有可聚焦元素设tabindex="-1" - 模态框内第一个可聚焦元素（如确认按钮）必须在显示后立刻
.focus()，且要在用户手势上下文内执行（iOS Safari 尤其敏感）
最常被忽略的是：焦点管理不是“锦上添花”，而是 WCAG 2.1 中 2.4.3（Focus Order）和 4.1.2（Name, Role, Value）的硬性要求。一旦路由切换、模态框、动态 tab 面板这些场景没处理好，整个应用对键盘和读屏用户就是不可用的——不是“不太好用”，是“根本不能用”。
