HTML单页应用路由跳转的可访问性处理-html教程-PHP中文网

必须手动管理焦点、实时播报内容变更、同步更新document.title、控制模态框焦点流，并确保所有操作在dom完全渲染后执行。

html单页应用路由跳转的可访问性处理

路由切换后焦点没落到新页面主标题

屏幕阅读器用户和键盘用户会卡在旧位置，以为页面没变。SPA 不刷新页面，浏览器不会自动重置焦点，必须手动干预。

每次路由匹配成功后，立刻执行 document.getElementById('main-heading').focus()，前提是该元素有 tabindex="-1"
不要用 scrollIntoView() 代替聚焦——它只滚动，不触发屏幕阅读器播报
如果主标题是动态渲染的，得等 DOM 插入完成再聚焦，可用 requestAnimationFrame 或 setTimeout(() => focus(), 0)
避免聚焦到 div 或 span 上：它们默认不可聚焦，加了 tabindex 后又可能破坏语义，优先用 h1 等语义化标题

内容变更没被屏幕阅读器感知

用户点了“订单列表”→“订单详情”，界面变了，但读屏软件毫无反应，相当于“静音切换”。

在根容器（如 <main id="app"></main>）里加一个常驻的 <div aria-live="polite" aria-atomic="true"></div>
路由切换后，往这个区域写文本，例如：liveRegion.textContent = "已进入订单详情页面"
别用 aria-live="assertive"——它会打断当前播报，适合错误提示，不适合页面导航
不要把 live 区域藏在 display: none 或 aria-hidden="true" 里，否则辅助技术直接忽略

document.title 没同步更新

浏览器标签页仍显示“首页”，用户无法通过任务栏快速识别当前页，书签也容易混乱。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

每次路由处理函数执行时，同步设置 document.title = "订单详情 - 我的商城"
别依赖框架或模板自动更新——纯 HTML + JS 的 SPA 必须手写这行代码
title 字符串里建议包含页面核心信息+品牌名，顺序按重要性从左到右，因为标签页截断通常发生在右侧
history.state 为空（比如用户直接访问链接）时，仍要从 URL 解析出 title，不能跳过

模态框打开/关闭时焦点失控

弹窗出现后键盘焦点还在背景按钮上，用户按 Tab 键就跳出弹窗；关掉后焦点丢失，得按多次 Tab 才回到主内容。

模态框 show() 时，立即 firstFocusableElement.focus()，且用 event.preventDefault() 阻止默认行为干扰
记录打开前的焦点元素：const prevActive = document.activeElement; modal.show(); ... modal.hide(); prevActive?.focus();
禁用背景交互不是靠 pointer-events: none——它不阻止键盘访问，得用 inert 属性或遍历设 tabindex="-1"
关闭模态框后，若原焦点元素已被销毁（比如路由切换导致 DOM 替换）， fallback 到主标题或 #app 容器