aria-live="polite"适用于非紧急内容，如表单提示、状态更新；aria-live="assertive"仅用于需立即响应的紧急信息，如关键错误。二者选择不当会导致打断用户或信息被忽略，且需配合aria-atomic="true"和恰当DOM更新方式确保播报准确完整。
aria-live 是唯一能让屏幕阅读器感知并播报 DOM 动态变化的 HTML 属性，不加它，视障用户完全不知道内容已更新。
aria-live="polite" 和 aria-live="assertive" 怎么选
选错值会导致打断用户或完全被忽略：
-
aria-live="polite"：等屏幕阅读器当前朗读完再播，适合非紧急内容，比如表单校验提示、搜索建议、状态提示（“已保存”“上传中 65%”） -
aria-live="assertive"：立刻中断当前朗读强制播报，仅用于必须立即响应的场景，如登录失败弹窗、关键错误（“网络连接中断”） -
aria-live="off"不推荐显式设置——直接删掉属性更干净，避免冗余声明
为什么只加 aria-live 还是读得乱七八糟
因为默认只读变化的节点，语义断裂很常见。比如实时区域里只更新了一个 <span>，屏幕阅读器可能只报出“23”，没上下文，用户根本听不懂。
- 加
aria-atomic="true"强制重读整个区域，适合状态类提示（整句“密码强度：强”） - 别在
aria-live容器里再嵌套另一个aria-live区域，原子性会失效，读起来像卡顿录音 -
aria-relevant="text"可过滤掉 class 切换、子元素增删等无关变更，避免误播报
DOM 更新方式不当，会导致重复朗读或静默
屏幕阅读器监听的是 DOM 变更，不是数据变化。清空再重建整个容器，等于告诉辅助技术“所有内容都被删了”，再加新内容就变成两次播报。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
container.innerHTML = ''后重新拼接全部内容 - 正确做法：用
appendChild()或insertAdjacentElement()增量追加新消息；或只更新textContent/innerText - 对数字动画类组件（如 odometer），必须确保每次数值变更都触发真实 DOM 文本更新，不能只改 CSS 或 canvas
真正难的不是加属性，而是判断哪些变化值得播报、何时播报、读多长——这需要结合用户当前任务流来设计，而不是堆砌 ARIA 属性。
