网络断开与恢复提示需兼顾可访问性与实用性：断开时用aria-live播报+可视提示条；恢复时防抖探测后反馈；错误页强化语义结构与操作指引；文案避免术语，强调用户动作。
网络断开和恢复时的提示，核心是让用户立刻感知状态变化、理解原因、知道下一步该做什么，而不是只看到“已断网”或“已重连”几个字。关键不在炫技，而在信息准确、时机恰当、操作可及。
断开时：主动声明 + 语义化播报
仅靠 navigator.onLine === false 不够——它可能延迟触发，也可能根本没变（比如 DNS 失败时仍返回 true）。真正要做的，是结合检测结果，用辅助技术可感知的方式“喊出来”：
- 在页面顶部插入一个不可见但可朗读的提示容器：
<div aria-live="assertive" aria-atomic="true" class="sr-only">网络已断开，部分功能暂时不可用</div> - 配合 CSS 隐藏视觉样式但保留读屏支持：
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } - 不要用
display: none或visibility: hidden，它们会让aria-live失效 - 同时在可视区域显示简洁提示条（如固定在顶部），文字明确、带刷新按钮，不依赖 JS 也能点击生效（
<button onclick="location.reload()">重试</button>）
恢复时：避免闪动 + 明确反馈
网络抖动会导致 online 事件和心跳成功频繁来回触发，造成提示反复出现消失。必须加防抖和状态确认：
- 不直接响应
online事件就显示“已恢复”，而是立即发起一次真实服务探测（如fetch('/api/ping')） - 用
AbortController设 5 秒超时，防止请求挂起 - 只有心跳成功且状态稳定超过 1 秒后，才显示“已重新连接”，并自动清除之前的断开提示
- 提示出现后 2 秒自动淡出，不打断用户当前操作；若用户正在输入，可延迟或禁用自动关闭
错误页也要可访问 + 可操作
404 或服务异常页不是装饰画，是用户迷路时的路标。很多团队只改样式，却漏掉关键语义：
- 主标题即使不是
<h1></h1>，也要加role="heading" aria-level="1"，确保读屏器识别为页面标题 - 整个错误内容区块包在
<main role="alert"></main>内，让辅助工具优先播报 - 移除无关导航和 footer，避免读屏器先念一堆菜单再念“页面找不到”
- 提供两个明确动作：“
<button onclick="history.back()">返回上一页</button>” 和 “@#@#@#@#@#@#@#@#@#@0”，都带实际跳转逻辑 - 所有图片加有意义的
alt文本，比如“断网小图标”不如“信号中断示意”
提示文案要避开技术黑话
用户不需要知道 ERR_CONNECTION_TIMED_OUT，只需要知道现在该干什么：
- 把“网络连接失败”改成“视频加载不了，可能是 Wi-Fi 信号弱或路由器卡住了”
- “服务暂时不可用”不如说“后台正在升级，2 分钟后就能继续使用”（如果真能预估）
- 避免“请检查您的网络设置”这种推责式表达，换成“我们正在尝试重新连接，请稍候”
- 按钮文字别写“OK”，写“重试一下”“刷新页面”“查看帮助”等带动作指向的短语
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
