公告区域必须用 aria-live 触发屏幕阅读器播报，优先选 aria-live="polite"，紧急时用 assertive；必设 aria-atomic="true" 确保完整朗读；禁用 innerhtml 重置、key 切换和 v-if 控制显隐；推荐 role="status" 或 role="alert"。
公告区域必须用 aria-live 触发屏幕阅读器播报，光靠视觉样式或 JS 更新 DOM 是无效的——视障用户根本感知不到。
公告区域该用 aria-live="polite" 还是 aria-live="assertive"
取决于信息紧急程度，不是所有“公告”都该打断用户：
-
aria-live="polite"：适合常规状态类公告，比如“已保存”“加载完成”“订单已提交”。屏幕阅读器等当前播报结束再读，不干扰用户操作 -
aria-live="assertive"：仅用于真正需要立即干预的情况，如“登录失败，请重试”“网络中断，无法提交”。它会强行中断朗读，容易引发烦躁，慎用 - 别用
aria-live="off"—— 直接删掉属性更安全；也别给同一区域反复切换两个值，行为不可预测
aria-atomic="true" 不是可选项，是公告能被听懂的前提
默认 aria-atomic="false" 时，屏幕阅读器只读变化的节点。比如你把 <div>上传中…</div> 改成 <div>上传完成</div>，它可能只读出“完成”，上下文全丢。
- 加
aria-atomic="true"后，整个容器内容重读，确保语义完整：“上传完成”而不是孤立的“完成” - 如果公告区域里混着图标、按钮等非文本子元素，
aria-atomic="true"还能避免屏幕阅读器跳过或误读它们 - 不要在公告容器内部再嵌套另一个
aria-live区域，原子性会失效，读起来像卡顿录音
DOM 更新方式比写对属性更重要
即使 aria-live 和 aria-atomic 都写对了，错误的更新方式也会让公告“失声”或重复朗读：
- 禁止清空整个容器再重建：
el.innerHTML = ""+el.innerHTML = newHTML—— 屏幕阅读器视为“全部删除+全部新增”，旧消息会被重读一遍 - 正确做法是只追加或替换最小必要节点，例如用
el.textContent = "上传完成"或el.appendChild(newSpan) - 在 React/Vue 中，别给公告容器设
key，否则每次更新都被当新组件处理，读两遍 - 避免用
v-if或ngIf控制公告显隐，换成v-show或 CSSvisibility: hidden，保持 DOM 节点存活
最常被忽略的一点：公告区域本身要语义清晰，建议配合 role="status"（非紧急）或 role="alert"（紧急），而不是裸 div。role 不仅影响播报逻辑，还影响辅助技术的归类和快捷导航支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
