role="alert" 不播报是因为需动态插入并触发可访问性更新，静态存在时屏幕阅读器忽略；必须初始隐藏、JS插入文本并设为可见，且显式添加aria-live="assertive"和aria-atomic="true"。
role="alert" 为什么有时不播报？
屏幕阅读器对 role="alert" 的响应不是“只要加了就立刻读”，而是依赖**动态插入 + DOM 可访问性生命周期**。如果元素是页面加载时就存在的静态节点，多数阅读器（如 NVDA、VoiceOver）会忽略它——因为没有“新内容出现”的信号。
关键在于：必须让屏幕阅读器感知到这是一个「新出现的、需要打断当前操作」的紧急信息。这通常靠 JavaScript 动态添加或修改 aria-live 属性触发。
正确触发播报的三步实操
- 用 <div role="alert"></div> 容器，但**初始为空或 display: none**，不要预先塞文字
- 在 JS 中向该容器插入文本（或设 textContent），并确保它此时是可见的（display: block 或移除 hidden）
- 不要依赖 role="alert" 单独工作；它隐式等价于 aria-live="assertive" aria-atomic="true"，但某些旧版 JAWS 或 Android TalkBack 对隐式行为支持不稳定，建议显式加上：aria-live="assertive" aria-atomic="true"
示例：
<div id="error-alert" role="alert" aria-live="assertive" aria-atomic="true" style="display:none;"></div>
JS 中：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const alertEl = document.getElementById('error-alert');
alertEl.textContent = '网络连接失败，请检查后重试';
alertEl.style.display = 'block'; // 触发可访问性树更新常见翻车点：CSS 和 DOM 操作踩坑
- visibility: hidden 或 opacity: 0 不行：元素仍在可访问性树中，且无“出现”语义
- display: none 是安全的隐藏方式，但插入后必须切换为 display: block（或其他非 none 值）才能被识别
- 不要在 role="alert" 元素里嵌套交互控件（如按钮），否则部分阅读器会跳过播报，或误判为可聚焦区域
- 避免高频更新同一 role="alert" 元素（比如每秒改一次文本）：aria-live="assertive" 会强制中断当前播报，导致语音卡顿甚至静音
替代方案：何时该换用 aria-live="polite"role="alert" 适合真正中断型错误（如表单提交失败、权限拒绝）。如果是次要提示（如“已保存”），用 aria-live="polite" 更友好。两者核心区别不在语气，而在**抢占优先级**：assertive 会中止当前语音流，polite 会排队等空闲时读。别为了“看起来高级”滥用 assertive，用户会被反复打断。
role="alert" 适合真正中断型错误（如表单提交失败、权限拒绝）。如果是次要提示（如“已保存”），用 aria-live="polite" 更友好。两者核心区别不在语气，而在**抢占优先级**：assertive 会中止当前语音流，polite 会排队等空闲时读。别为了“看起来高级”滥用 assertive，用户会被反复打断。
最易被忽略的一点：role="alert" 容器本身不能有 tabindex 或 focus() 调用——它不是焦点组件，强行聚焦反而破坏播报逻辑，还可能让键盘用户迷失上下文。
立即学习“前端免费学习笔记（深入）”；
