role="alert" 不在页面加载时自动播报，仅当dom内容动态变更且元素已存在时触发；需先挂载空元素再用textcontent更新，避免innerhtml、隐藏样式及重复文本。
role="alert" 的触发时机不是“页面加载就播报”
很多开发者以为给元素加 role="alert" 就能一进页面自动读出来，实际不是。它只在内容**动态插入**或**DOM变更被AT（辅助技术）检测到时**才触发播报，且要求元素本身已存在于DOM中（哪怕初始为空）。
- 错误写法：
<div role="alert">加载完成！</div>—— 如果这个<div> 是页面首次渲染就存在的，且文本一次性写死，多数屏幕阅读器（如NVDA、VoiceOver）根本不会读 <li>正确触发方式：先挂载空的 <code><div role="alert"></div>，再用JS修改其textContent或插入子节点 - 注意：不能靠
display: none或visibility: hidden隐藏后又显示来触发——必须是内容变更，不是可见性变更 - 更稳妥的做法是清空后用
textContent赋值：const alertEl = document.querySelector('[role="alert"]');<br>alertEl.textContent = '';<br>alertEl.textContent = '密码不能为空'; - 避免在 alert 元素内混用 HTML 标签——
role="alert"专为纯文本提示设计，嵌套<strong></strong>或<a></a>可能干扰播报或被跳过 - 不要重复设置相同文本（比如连续两次设为“提交成功”），AT 通常会去重或忽略
- 想让播报更“急迫”，保留
role="alert"即可（它已是最强优先级） - 想让播报稍缓一点（比如表单校验提示不打断用户操作），改用
aria-live="polite"并去掉role - 如果 alert 元素是通过
innerHTML插入整个新DOM片段，建议显式加aria-atomic="true"，否则AT可能只读变化的部分而非整段 - 推荐隐藏方式：
.sr-only {<br> position: absolute;<br> width: 1px;<br> height: 1px;<br> padding: 0;<br> margin: -1px;<br> overflow: hidden;<br> clip: rect(0, 0, 0, 0);<br> white-space: nowrap;<br> border: 0;<br>} - 绝对不要用
display: none或visibility: hidden—— 这会让元素彻底从可访问树中移除 - 确保 alert 元素在DOM中始终存在（不要用 v-if / *ngIf 动态销毁重建），否则每次重建都需重新初始化播报逻辑
为什么 innerHTML 赋值有时不触发 alert
直接用 element.innerHTML = "出错了" 在部分浏览器+AT组合下可能静默，尤其当新内容与旧内容结构差异大（比如从空字符串变成带 <span></span> 的HTML），导致AT无法可靠捕获“语义化变更”。
aria-live="assertive" 和 role="alert" 的关系
role="alert" 本质是 aria-live="assertive" + aria-atomic="true" + aria-relevant="additions text" 的快捷写法。但如果你需要微调行为，可以直接用 aria-live：
容易被忽略的 CSS 影响
即使JS正确更新了内容，如果 alert 元素被CSS隐藏（opacity: 0、transform: scale(0)、position: absolute; left: -9999px 等），部分AT会跳过它——不是因为看不见，而是因为“不可聚焦且无尺寸”被判定为无效播报源。
role="alert" 当成“自动广播喇叭”，却忽略了它依赖的是“内容变更”这个精确信号，而不是元素存在本身。
