aria-busy="true"在dom更新前设于动态容器上时起作用，告知屏幕阅读器暂停播报该区域内容，避免读出不完整或中间态；必须配对设为false，且不可与aria-live混用。
aria-busy="true" 什么时候起作用
aria-busy 是一个 ARIA 状态属性，用于向辅助技术（如屏幕阅读器）表明某个区域的内容正在动态更新、尚未稳定。它本身不会阻止 DOM 更新或暂停 JavaScript，只是传递语义信号。主流屏幕阅读器（NVDA、JAWS、VoiceOver）在遇到 aria-busy="true" 的容器时，会暂缓对该区域内节点变更的播报，避免读出中间态、不完整或重复的内容。
- 必须用在容器元素上（如
div、section），不能加在按钮或输入框等交互控件上 - 值只能是
"true"或"false"（字符串字面量，不是布尔值） - 不要和
aria-live冲突：若同时设了aria-live="polite"和aria-busy="true"，多数读屏会优先尊重aria-busy并静音该区域
如何正确设置和清除 aria-busy
关键在于时机精准：必须在数据请求开始后、DOM 更新前设为 "true"；在新内容完全渲染并可安全播报时，再设回 "false"。
// 示例：React 中控制 loading 状态
useEffect(() => {
if (isLoading) {
regionRef.current?.setAttribute('aria-busy', 'true');
} else {
regionRef.current?.setAttribute('aria-busy', 'false');
}
}, [isLoading]);
- 不要在
fetch().then()里才设aria-busy="true"——太晚了，请求已发，UI 可能已开始闪烁 - 清除时不要依赖
setTimeout模拟“等待”，而应基于真实渲染完成点（如 React 的useLayoutEffect、Vue 的nextTick、或MutationObserver监听目标节点变化） - 避免设完
aria-busy="true"后忘记恢复：残留的aria-busy="true"会让该区域永久“失声”
与 aria-live 配合使用的注意事项
aria-busy 通常和 aria-live 成对出现，构成完整的“加载中静音 → 加载完成播报”流程：
<div aria-live="polite" aria-busy="true" id="search-results"> <!-- 正在加载... --> </div>
-
aria-live必须始终存在且值不变（"polite"或"assertive"），否则aria-busy失效 - 若内容更新后需主动触发播报（比如加载完自动读出“找到 12 条结果”），应在设
aria-busy="false"后，再修改一次区域内的文本或插入带aria-live的临时提示元素 - 不要给子元素单独加
aria-live：这会绕过父级aria-busy的控制，导致中间状态被意外朗读
常见失效场景和调试方法
aria-busy 看似简单，但实际中容易因 DOM 结构或读屏配置失效：
- 屏幕阅读器未启用“智能暂停”模式（如 NVDA 默认开启，但某些企业定制版可能关闭）
- 容器元素被设了
display: none或visibility: hidden：此时整个区域不可访问，aria-busy无意义 - 使用了
innerHTML替换整个容器内容：若新 HTML 片段没带aria-busy="false"，重绘后状态丢失 - 测试时只看视觉反馈，没开读屏验证：务必用 NVDA + Firefox 或 VoiceOver + Safari 实测语音流
最可靠的验证方式：打开读屏，触发加载，在加载过程中观察是否完全不读任何中间文字或 loading 提示；完成后是否自然播报最终内容。如果仍有杂音，先检查 aria-busy 是否真的在 DOM 上实时切换，再确认容器是否被意外移出可访问树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
