aria-live="polite"常“读不到”或“只读最后一次”是因为其设计为排队等待空档播报，而长轮询高频更新（如每3秒）会导致中间通知被丢弃；应追加节点而非重置textcontent，并控制更新间隔≥800ms、避免容器重渲染。
长轮询通知里 aria-live="polite" 为什么经常“读不到”或“只读最后一次”
因为 aria-live="polite" 本质是“排队等空档播报”，而长轮询常在几秒内连续触发多次更新（比如每 3 秒拉一次新消息），屏幕阅读器会把中间的更新直接丢弃，只读最后一次——不是 bug，是设计如此。用户可能完全错过中间两条关键通知，尤其当最后一条是“操作成功”，而前一条是“余额不足”时，问题就严重了。
避免丢通知：用 append 模式代替 textContent 替换
每次轮询拿到新消息，别清空再写：el.textContent = '新消息'；而是追加节点，让屏幕阅读器感知为“新增”而非“覆盖”：
- ✅ 推荐：
el.insertAdjacentHTML('beforeend', '<p>✅ 订单已支付</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>') - ✅ 或：
const p = document.createElement('p'); p.textContent = '✅ 订单已支付'; el.appendChild(p) - ❌ 避免：
el.innerHTML = ''后再el.textContent = ...（重置监听状态） - ⚠️ 注意：追加的
<p></p>必须有可读文本，不能是空标签或含aria-hidden="true"的子节点
polite 下如何确保每条都播，又不造成语音轰炸
靠纯 aria-live 参数做不到“每条必播”，得靠节奏控制和语义强化：
- 给每条通知加明确动词前缀：
'⚠️ 库存只剩 1 件'比'库存：1'更易被识别为独立事件 - 两次更新至少间隔 800ms，否则 NVDA/Firefox 组合大概率合并播报（VoiceOver/Safari 更严，建议 1200ms）
- 不要依赖
aria-atomic="true"——它会让整块区域重读，反而掩盖新增内容；这里需要的是“只读新增”，所以保持aria-atomic="false"（默认值）更稳妥 - 若必须高频推送（如每秒心跳），改用
role="log"容器 +aria-live="polite"，它对追加行为更友好，但需确保容器始终存在且不被重渲染
React/Vue 项目里最容易踩的坑
框架的响应式更新机制天然容易破坏 aria-live 的监听连续性：
- ❌ 避免给 live 区域加唯一
key并随消息列表变化——这等于每次重建 DOM，监听中断 - ✅ 正确做法：live 容器用固定 ID（如
id="notification-log"），消息列表用map渲染到其内部，但容器本身不参与重渲染 - ⚠️ Vue 中慎用
v-if控制容器显隐；React 中别用useState控制容器挂载/卸载——aria-live区域必须从页面加载起就存在 DOM 中 - 测试时打开 DevTools 的 Accessibility 树，确认该元素始终在 AX Tree 里，且
live属性解析为polite
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
