aria-live 是唯一控制实时区域可访问性通知的 ARIA 属性，需配合 aria-atomic 和 aria-relevant 精确控制播报内容与时机，仅响应真实 DOM 变更。
aria-live 是唯一靠谱的实时区域控制属性
HTML 本身没有“实时区域”这个原生概念，所有动态内容更新后的可访问性通知，全靠 aria-live 这个 ARIA 属性驱动。它不是视觉效果开关，而是告诉屏幕阅读器：“这块内容变了，你得读出来”。不加它，哪怕 DOM 刷了新数据，视障用户也完全感知不到。
-
aria-live="polite"：等用户当前操作（比如读完一句话）再播报，适合非紧急更新，如搜索建议、表单校验提示 -
aria-live="assertive"：立刻中断当前朗读，强制播报，仅用于错误弹窗、登录失败这类必须打断用户的场景 -
aria-live="off"：显式关闭，但一般不用——直接删掉属性更干净 - 必须配合
aria-atomic和aria-relevant控制播报粒度，否则容易读半截或重复读
aria-atomic 决定读整块还是只读变化部分
默认情况下，aria-live 区域里只更新了某个 span，屏幕阅读器可能只读那个 span 的新文本，导致语义断裂（比如读出“23”但没上下文）。这时就得靠 aria-atomic。
-
aria-atomic="true"：整个 live 区域内容重读，适合状态提示类（如“已保存”“上传中 65%”） -
aria-atomic="false"（默认）：只读变化节点，省流量但易出歧义 - 别在
aria-live容器里嵌套另一个aria-live，原子性会失效，读起来像卡顿录音
aria-relevant 精确过滤哪些变更值得播报
一个实时区域可能同时改文本、增删子元素、甚至切换 class，但并非所有变更都需要朗读。用 aria-relevant 可以筛掉干扰项。
-
aria-relevant="additions"：只对新增节点触发播报（如聊天消息列表追加一条） -
aria-relevant="text"：只响应文本内容变化（适合计数器、状态文案） -
aria-relevant="all"（默认）：新增、删除、文本改、属性变，全报——容易刷屏，慎用 - 多个值用空格分隔，如
aria-relevant="additions text"，但别加removals，删节点时播报“某某已消失”对用户毫无意义
常见翻车现场：DOM 更新方式影响 aria-live 生效
aria-live 不监听 JS 变量或 Vue data，只响应真实 DOM 变更。如果用 innerHTML 替换整个容器，或者用 React 的 key 强制重渲染，都可能导致屏幕阅读器错过中间状态或重复播报。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
textContent或innerText更新纯文本，最稳 - 避免在
aria-live区域内用v-if或ngIf切换整个子树，换成v-show或 CSSvisibility - React 中不要给
aria-live容器设key，否则每次更新都当新节点处理，读两遍 - 测试时别只看视觉，用 VoiceOver（macOS）或 NVDA（Windows）真实跑一遍，静音状态下听它读什么
aria-live 往往要和 aria-busy 配合——比如加载中先设 aria-busy="true" 暂停播报，数据回来再切回 false 并更新内容。这点很容易被跳过，结果就是“加载中…”刚念一半，新内容就插进来，读得七零八落。 
