role="alertdialog" 不会自动触发屏幕阅读器朗读，必须插入DOM后立即聚焦、设置tabindex="-1"、配合aria-labelledby和aria-describedby，并避免display:none隐藏。
role="alertdialog" 本身不会自动触发屏幕阅读器朗读
很多人以为只要加了 role="alertdialog"，屏幕阅读器就会立刻读出来——实际不会。它只是声明语义，不带强制播报行为。真正触发朗读的关键是：元素必须在 DOM 中插入后**立即获得焦点**，且不能被隐藏或禁用。
- 确保该元素初始状态为
display: block（不是display: none或visibility: hidden），否则屏幕阅读器会跳过 - 插入 DOM 后，立刻调用
element.focus()，且该元素需有tabindex="-1"才能被聚焦 - 避免在
setTimeout或动画完成后再聚焦——延迟哪怕 50ms 都可能导致朗读被跳过或打断
必须同时设置 aria-labelledby 和 aria-describedby
仅靠 role="alertdialog" 不足以让屏幕阅读器准确播报内容。它需要明确的标题和描述引用，否则可能只读“对话框”或漏掉关键信息。
-
aria-labelledby指向标题元素的id（如id="alert-title"），屏幕阅读器优先读这个 -
aria-describedby指向正文或说明段落的id，用于补充细节 - 这两个属性值必须是当前页面中真实存在的
id，且不能为空或拼错 - 如果标题文本是动态生成的，确保
aria-labelledby在聚焦前已绑定好，否则 NVDA 或 VoiceOver 可能读不到
避免用 display: none 切换 alertdialog 显示状态
用 display: none 控制显隐会导致元素从可访问树中移除，再次显示时屏幕阅读器无法感知变化。即使后续聚焦，也大概率不播报。
- 改用
visibility: hidden+position: absolute+clip: rect(0 0 0 0)等 CSS 技巧隐藏但保留可访问性 - 更稳妥的做法是始终保留在 DOM 中，仅通过
hidden属性控制（hidden不影响 ARIA 语义，且支持无障碍切换） - 不要依赖 JS 动态添加整个
role="alertdialog"结构再聚焦——DOM 插入和 focus 的时机差容易出问题；推荐预先渲染、仅切换hidden和焦点
测试时别只听 ChromeVox，要覆盖主流组合
不同屏幕阅读器对 role="alertdialog" 的处理差异很大：VoiceOver（macOS/iOS）相对可靠，NVDA（Windows）依赖焦点时机，TalkBack（Android）常忽略 aria-describedby。
立即学习“前端免费学习笔记（深入）”；
- 必须实测 VoiceOver + Safari、NVDA + Firefox、TalkBack + Chrome 三组组合
- 注意 Windows 下 NVDA 默认关闭“焦点移动时自动朗读”，需开启“语音设置 → 浏览模式 → 焦点移动时朗读”选项才生效
- 某些框架（如 React）的批量更新或异步渲染可能延迟焦点设置，建议用
requestIdleCallback或setTimeout(..., 0)包裹.focus()来规避渲染队列问题
最易被忽略的点：焦点元素没有键盘可操作控件（比如只有文字没按钮）时，部分屏幕阅读器会跳过朗读——务必保证至少一个 button 或 input 在 dialog 内，并设 tabindex="-1" 给容器本身。
