aria-relevant需配合aria-live使用，仅支持additions、removals、text、all；推荐text+polite组合，textContent更新最可靠，innerHTML易失效。

aria-relevant 该设哪些值才真正触发屏幕阅读器播报

设了 aria-relevant 却没反应？大概率是值选错了，或者没配合 aria-live 一起用。这个属性本身不生效，只是告诉屏幕阅读器“关注哪些变更”，必须搭配 aria-live 才能激活监听。

常见错误现象：aria-relevant="additions" 写了，但新增 DOM 后屏幕阅读器静音；或者删掉元素时误以为会读“已移除”，其实默认不读删除动作。

• aria-relevant 只接受空格分隔的多个值：additions、removals、text、all（等价于前三者组合）
• additions：只对 append 类操作有效（如 element.appendChild()），innerHTML += 或 textContent 覆盖不算“新增节点”
• removals 极少被支持——NVDA 和 VoiceOver 基本忽略它，别依赖它播报删除
• text 是最稳妥的选择：只要子文本内容变化（包括通过 textContent 或 innerText 修改），就会触发播报

aria-live 的 polite / assertive 怎么选不翻车

选错 aria-live 级别，轻则播报延迟，重则打断用户当前操作（比如正在输入，突然弹出提示把焦点抢走）。

使用场景差异明显：polite 是默认值，适合状态更新（如“已保存”）、表单校验提示；assertive 仅用于紧急中断（如“网络断开，请重连”），且必须慎用——部分读屏会立即暂停当前语音并插播。

• aria-live="polite"：等用户停顿（如读完当前句）再播报，兼容性好，推荐作为首选
• aria-live="assertive"：可能打断一切，iOS VoiceOver 对它的处理不稳定，某些版本直接静音
• aria-live="off" 不是合法值，别写；禁用播报请移除属性或设为 polite 后清空内容
• 动态切换 aria-live 值无效，必须重新插入元素或用 innerHTML 触发重载

为什么 innerHTML 替换后 aria-relevant 没反应

因为 aria-relevant 监听的是 DOM 树结构变化，不是内容字符串变化。innerHTML = "新内容" 是销毁旧子树 + 创建新子树，但若新内容不含新节点（比如纯文本），屏幕阅读器可能不认为这是“相关更新”。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

性能影响很实际：频繁用 innerHTML 触发重渲染，不仅让 aria-relevant 失效，还会导致焦点丢失、事件监听器被清空。

• 优先用 textContent 更新纯文本，它能稳定触发 aria-relevant="text"
• 要插入 HTML 片段，改用 element.replaceChildren(...) 或 element.setHTMLUnsafe()（需自行 sanitize），比 innerHTML 更可控
• 避免在 aria-live 区域内放可聚焦元素（如 ），否则焦点可能跳转，破坏阅读流

React/Vue 里怎么安全更新 aria-live 区域

框架的虚拟 DOM 优化常绕过原生 DOM 变更检测，导致 aria-relevant 完全失灵。不是框架 bug，是它根本没走浏览器那套“节点增删”路径。

最容易被忽略的点：框架组件重渲染时，哪怕 DOM 最终一样，aria-live 区域也大概率被完整替换，造成播报重复或丢失。

• 在 React 中，给 aria-live 容器加 key 并保持稳定（比如用 status ID），避免无谓重挂载
• Vue 用户注意 v-if 会彻底卸载元素，改用 v-show 配合 aria-hidden 控制可见性
• 所有框架都建议：更新前先清空区域（el.textContent = ""），再设新内容，确保变化被识别
• 别在 useEffect 或 watch 里直接操作 innerHTML —— 改用 ref + textContent，更贴近原生语义

动态区域的可靠性不取决于属性堆得多，而在于每次更新是否真实产生浏览器可感知的 DOM 变化。很多问题，卡在“以为改了，其实没进 DOM”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！