1. aria-busy 的定义与无障碍背景
1.1 ARIA 语义与 aria-busy 的定位
在前端无障碍开发中，aria-busy 用于指示区域正在进行耗时操作，屏幕阅读器与其他辅助技术会将该状态告知用户。它属于 ARIA 状态属性的范畴，不是具体进度的百分比，而是一个等待信号，帮助用户理解界面暂时不可用的事实。
正确理解 aria-busy：它强调区域的“忙碌状态”，并与 aria-live、role 等组合使用，才能在动态内容替换时实现可预见的无障碍行为。
1.2 何时应启用 aria-busy
在进行数据拉取、渲染大规模内容、文件上传/下载或长时间计算等场景时，应将 aria-busy 设置在包含目标内容的容器上，直到更新完成再移除该标记。避免在短暂的动画上长期使用 aria-busy，以免引发辅助技术的误导。
实现要点是确保 aria-busy 的状态与实际视觉加载状态一致，一致性是无障碍体验的核心。
// 简易示例：异步加载内容时控制 aria-busy
const container = document.getElementById('content-area');
container.setAttribute('aria-busy', 'true');// 模拟异步数据获取
fetch('/api/data').then(res => res.text()).then(html => {container.innerHTML = html;container.setAttribute('aria-busy', 'false');});
2. 在前端加载场景中应用 aria-busy 的正确姿势
2.1 对容器层级应用的策略
将 aria-busy 应用在承载更新的父容器上，能确保屏幕阅读器把整块区域视作一个更新单元进行等待，而不是逐个元素逐步宣布变化。粒度选择要合理，过大或过小都可能影响可访问性体验。
同时，避免在静态、已完成的内容上保持忙碌状态；务必在渲染完成后移除 aria-busy，否则会让用户持续处于等待状态的感知。
2.2 与骨架屏和 aria-live 的搭配
骨架屏（skeleton）提供视觉上的加载占位，能减少用户对“空白区域”的焦虑，但它并不能替代 aria-busy 的信号。骨架屏与 aria-busy 的组合应保持状态同步，以确保辅助技术和视觉提示一致。
aria-live 作为动态通知渠道，在内容更新完成后可以用来宣布变更，但需要避免过度唤醒用户。在可控的场景下结合 aria-live，能让用户获得清晰的变更描述。
<div id="content-area" aria-live="polite" aria-label="加载结果区域"><!-- 占位内容或骨架屏 -->
</div><script>
// 加载过程
const area = document.getElementById('content-area');
area.setAttribute('aria-busy', 'true');
fetch('/api/data').then(r => r.text()).then(html => {area.innerHTML = html;area.setAttribute('aria-busy', 'false');});
</script>3. 最佳实践：结合辅助技术的无障碍加载状态设计
3.1 与 aria-live 的配合
aria-live 能在文本内容发生变化时向用户朗读新增信息，将 aria-busy 与 aria-live 结合使用，在区域显式加载完成后再通过 aria-live 进行具体更新描述，提升可访问性体验。
为避免干扰，应根据需要选择 aria-live="polite" 或 assertive，并避免对同一内容重复播报。确保在状态切换时提供清晰的指示文本，例如“加载中，请稍候”。
<div id="results" aria-live="polite" aria-label="结果区域更新"></div><script>
function renderResults(html) {const r = document.getElementById('results');r.innerHTML = html;// 更新完成时，aria-live 会读出变更
}
</script>3.2 无障碍进度与反馈
对于耗时较长的任务，除了 aria-busy 之外，提供阶段性反馈更有利于用户理解进度。可以使用 进度条（aria-valuenow/aria-valuemax/aria-valuetext） 来表达具体进度，同时保持 aria-busy 的区域状态一致。
<div id="loader" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="加载进度"><span class="progress" style="width:0%"></span>
</div><script>
function updateProgress(p) {const bar = document.querySelector('#loader');bar.setAttribute('aria-valuenow', p);bar.querySelector('.progress').style.width = p + '%';
}
</script>4. 常见坑点与兼容性
4.1 浏览器与屏幕阅读器支持差异
尽管主流浏览器与屏幕阅读器普遍支持 aria-busy，仍存在实现差异。部分旧版或特定组合的辅助技术对 aria-busy 的解释可能不一致，因此不能单独依赖它来传达所有无障碍信息。
在开发阶段应进行跨平台测试，覆盖 Chrome、Firefox、Edge、Safari 等浏览器，以及常见的屏幕阅读器工具，确保行为可预测且一致。
4.2 性能与无障碍性的权衡
处理密集计算或大型数据加载时，应尽量把任务拆分为异步微任务，避免主线程阻塞。aria-busy 仅描述状态，具体的进度描述应通过 aria-valuetext 或文本更新来实现，以兼容不同设备的朗读行为。
// 使用 Web Worker 降低阻塞，同时更新 aria-busy
const container = document.getElementById('results');
container.setAttribute('aria-busy', 'true');
const worker = new Worker('worker.js');
worker.onmessage = function(e) {container.innerHTML = e.data;container.setAttribute('aria-busy', 'false');// 如有需要可通过 aria-live 提示结果
};