aria-live="polite" 是动态内容无障碍播报的必要起点，需配合 sr-only 容器、初始 DOM 存在、textContent 更新及内联关键样式才可靠生效。
aria-live="polite" 是动态内容播报的起点，但不是万能开关
只要页面用 JS 更新了文本（比如表单校验提示、加载状态、通知弹窗），屏幕阅读器默认不会主动读出来——它只在初始渲染或用户手动导航时播报。aria-live 是唯一被广泛支持的触发机制，但它必须配合正确属性值和 DOM 位置才生效。
常见错误现象：aria-live="assertive" 被滥用，导致打断用户当前操作；aria-live 放在 display: none 容器里，内容更新后仍不播报；或者元素本身没有文本节点，只靠 JS 改 innerHTML 却没触发可访问性树更新。
-
aria-live="polite"适用于非紧急内容（如“已保存”“加载完成”），等用户暂停操作后再读 -
aria-live="assertive"仅用于中断性消息（如“网络断开，请重试”），但会强行中断当前朗读，慎用 - 必须把该属性加在**内容将要插入的容器上**，而不是父级布局盒；且容器不能有
aria-hidden="true"或display: none - 更新内容时，推荐直接替换整个容器的
textContent，避免只改子节点引发部分读屏器漏读
sr-only 容器 + aria-live 组合才是生产环境稳妥写法
单纯用 aria-live 容器放在可视区域里，容易干扰 sighted 用户视觉节奏；而把它藏起来又怕读屏器忽略。标准解法是用 .sr-only 类包裹 aria-live 区域，既保持语义完整，又不破坏 UI。
关键点在于：这个容器必须在 HTML 初始加载时就存在，不能靠 JS 动态创建再挂 aria-live——某些读屏器（尤其旧版 NVDA）只监听初始 DOM 中声明了 aria-live 的元素。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 样式必须含
position: absolute、width: 1px、height: 1px、clip: rect(0, 0, 0, 0)，缺一不可 - 务必加
border: 0，否则某些 NVDA + Firefox 组合会误读边框语义 - 父容器不能设
overflow: hidden，否则position: absolute的.sr-only元素可能被裁掉，读屏器就读不到 - 示例结构：
<div aria-live="polite" class="sr-only"></div>
，后续 JS 只需更新其textContent
React/Vue 中动态内容更新容易失步，hydration 是最大陷阱
服务端渲染（SSR）或 React/Vue 的 hydration 过程中，如果 .sr-only + aria-live 容器的 CSS 还没加载，它会短暂显示在页面顶部——不仅 sighted 用户看到闪动，屏幕阅读器还可能先读一遍空容器，等 JS 注入后又读一遍真实内容，造成重复播报。
这不是框架 bug，而是渲染时序问题。解决思路不是等 JS，而是让关键样式提前到位。
- 把
.sr-only样式内联进的 critical CSS 中，确保首屏即生效 - React 中不要用
useState控制是否渲染该容器，而是始终渲染，仅靠逻辑控制其textContent - Vue 中禁用
v-show切换.sr-only显隐（它只是切display），改用v-if或纯 CSS 控制 - 若必须 JS 控制显隐，优先用原生
el.hidden = true（HTML5hidden属性），它比 class 更早介入渲染流程
别用 aria-label 替代动态内容播报
aria-label 是静态的控件名称替换，它只在元素首次获得焦点或初始化时读一次。对“提交成功”“剩余时间 2 分钟”这类随时间/状态变化的内容，aria-label 完全无效。
更危险的是混用：<button aria-label="提交">提交</button> 再加一个 aria-live 区域播报“已提交”，会导致屏幕阅读器重复读两遍——一次是按钮名，一次是状态更新。
- 按钮/输入框等交互控件，用
aria-label或<label></label>提供固定名称 - 状态变更、异步结果、倒计时等动态信息，必须走
aria-live+.sr-only路径 - 如果动态内容附着在某个控件上（比如输入框下方的校验提示），优先用
aria-describedby指向一个独立aria-live区域，而不是塞进控件的aria-label
aria-live 容器必须在 HTML 解析阶段就存在，CSS 必须在 layout 触发前就位，JS 更新必须走 textContent 而非局部 DOM 操作。这三个“必须”，漏掉任何一个，屏幕阅读器都可能静默。 
