离线状态下需用aria-live="assertive" + role="alert"主动播报网络中断提示，配合sr-only样式隐藏视觉但保留辅助技术可访问性，并确保404页补全role="heading"、aria-hidden="true"、<main>及语义化alt文本。
离线状态下怎么让屏幕阅读器知道页面不可用
离线时，navigator.onLine 返回 false，但这个状态本身对辅助技术完全透明。如果不主动声明，屏幕阅读器仍会把当前页面当作正常内容朗读，用户根本意识不到是网络问题导致功能失效。
关键做法是用 aria-live="assertive" + role="alert" 主动播报离线状态：
- 在
顶部插入一个隐藏但可被朗读的提示容器：<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失效 - 离线恢复后，需手动清空并重发新消息，否则旧提示可能残留
404 页面里哪些 ARIA 属性最容易漏加
404 页面常被当成“静态提示页”而忽略语义完整性，结果屏幕阅读器进入后直接从第一个链接开始读，跳过“出错了”这个核心信息。
必须显式补上的三个点：
立即学习“前端免费学习笔记（深入）”；
- 给主标题加
role="heading"和aria-level="1"（尤其当它不是<h1>时），否则可能不被识别为页面标题 - 错误代码
404元素需加aria-hidden="true"，避免屏幕阅读器念成“四零四”而非“Not Found” - 所有导航链接（如“返回首页”“搜索”）必须有明确的
aria-label或包裹在<nav>内，否则键盘用户 tab 到它们时，只听到“链接”，不知去向
用 <main> 包裹错误内容真有必要吗
有必要，而且是强制性的。W3C 明确要求：每个页面有且仅有一个 <main>，它代表文档中与当前 URL 直接相关的核心内容。
对 404 或离线页来说，<main> 就是那个“页面不存在”的主体信息区域。漏掉它的后果很实际：
- 屏幕阅读器无法通过快捷键（如 JAWS 的
m键）快速跳转到主要内容，用户得逐个元素扫读 - 某些浏览器会把无
<main>的页面默认聚焦到<body>，导致键盘焦点“悬空”，tab 键第一次按下去没反应 - 搜索引擎可能降低该页的内容可信度评分，影响爬虫对错误页质量的判断
- 别用
<div role="main">替代 —— 原生<main>自带隐式 ARIA 语义，更可靠
图片类错误提示（如断网插画、404 插图）怎么写 alt
纯装饰性插图可以写 alt=""，但绝大多数报错页面里的图都承载关键信息，不能空着。
判断依据就一条：如果删掉这张图，用户是否还能准确理解当前状态？
- 断网小火箭图标 →
alt="网络连接已中断"，不是alt="火箭"或alt="icon-network-off" - 404 页面的迷路小熊 →
alt="您访问的页面不存在，就像小熊找不到回家的路"（兼顾可访问性与品牌语气） - 若图中含文字（如“404 Not Found”叠在图上），
alt必须包含全部可读文字，不能只说“404 插图” - 避免
alt与相邻文本重复。比如图下已有<p>页面未找到</p>，图的alt就不该再写“页面未找到”，而应补充上下文：“服务器找不到您请求的资源”
离线和错误页的可访问性陷阱，往往不在“做了什么”，而在“没做声明”——浏览器不会替你告诉用户“这页坏了”，你得亲手把这句话用语义、ARIA 和文案写进 DOM 里。最常被跳过的，其实是那句“你现在遇到的问题是……”，而不是后续的解决方案。
