1. 语义与行为：aria-busy 的核心概念
1.1 aria-busy 的定义与语义
在前端无障碍开发中，aria-busy 是一个布尔型属性，用来指示区域内容正在进行异步更新。当 aria-busy 设置为 true，屏幕阅读器和辅助技术会识别该区域处于“正在处理中”的状态，从而为用户提供额外的反馈。
aria-busy 并非用来显示具体进度文本，而是传达“区域正在被更新”的信息。正确使用可以避免用户在内容未就绪时做出错误交互，从而提升可访问性和用户体验。
1.2 使用场景与基本原则
常见的使用场景包括数据加载、筛选结果刷新、分页内容替换、动态表单校验结果更新等。在异步更新开始时设置 aria-busy="true"，更新完成后再设回 aria-busy="false"。这一过程对辅助技术而言，是一个明确的状态转换。
需要注意的是，aria-busy\"true\" 不等同于显示加载指示器文本，它的作用是告诉 AT 当前区域正在变更，具体的进度文本应结合 aria-live、aria-label 等机制提供可感知信息。
<div id="content" aria-busy="true" aria-label="正在加载结果" role="region"></div>
<script>// 模拟异步加载fetch('/api/data').then(res => res.json()).then(data => {const el = document.getElementById('content');el.innerHTML = '<p>加载完成，共 ' + data.items.length + ' 条结果</p>';el.setAttribute('aria-busy', 'false');});
</script>
2. 场景化应用：实际场景与实现要点
2.1 数据加载场景中的 aria-busy 实践
在数据拉取、搜索结果更新等场景中，将更新区域包裹在一个容器内并对其设置 aria-busy，可以让使用屏幕阅读器的用户感知当前内容正在更新。
为了避免干扰，建议在异步开始时尽量保持区块的可聚焦性稳定，并在内容就绪后迅速清除 aria-busy 状态。结合 aria-live 可以在新内容生成时提供可听取的消息。
async function loadPage(page) {const container = document.getElementById('list');container.setAttribute('aria-busy', 'true'); // 开始更新try {const res = await fetch(`/api/items?page=${page}`);const items = await res.json();container.innerHTML = items.map(it => '<li>' + it.name + '</li>').join('');} finally {container.setAttribute('aria-busy', 'false'); // 更新结束}
}
2.2 表单提交后的内容替换与反馈
在提交表单后需要替换区域内容时，将目标区域标记为 aria-busy=true，以便用户清楚地知道系统正在处理输入。
完成后再将 aria-busy 设置回 false，同时提供简单的结果通知，避免用户误以为已经完成但界面尚未响应。
<form id="contactForm"><input type="text" name="name" /><button type="submit">发送</button>
</form><div id="result" aria-live="polite" aria-atomic="true" role="status"></div><script>
document.getElementById('contactForm').addEventListener('submit', async function(e){e.preventDefault();const container = document.getElementById('result');const region = document.getElementById('contactForm');region.setAttribute('aria-busy', 'true');// 假设提交await fetch('/api/submit', { method: 'POST', body: new FormData(this) });region.setAttribute('aria-busy', 'false');container.textContent = '提交已收到，我们将尽快与您联系。';
});
</script>
3. 与辅助技术协同：aria-live 等
3.1 aria-live 与 aria-busy 的搭配
aria-live 区域用于实时宣布新内容，与 aria-busy 结合使用时，可以在内容准备就绪时提供可感知的文本反馈。虽然 aria-busy 提示区域正在更新，但 aria-live 可以明确告知新内容的到来。
组合使用时，请确保 aria-live 区域与 aria-busy 的语义一致：aria-busy 指示正在处理，aria-live 提供后续的新内容的可听通知。
<div id="results" aria-live="polite" aria-label="结果列表" role="region"></div>
<div aria-live="polite" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden">新内容已就绪
</div>
3.2 Focus 管理与可感知状态
在更新区域完成后，若需要引导用户继续操作，应确保焦点在合理的位置，避免让屏幕阅读器忽略更新内容。必要时可以通过脚本将焦点临时移动到新的内容或可交互元素上。
同时，避免在高频率的快速更新中不断切换 aria-busy 状态，以免造成干扰。持续的、可预测的更新更有利于可访问性体验。
const btn = document.querySelector('#load');
btn.addEventListener('click', async () => {const region = document.querySelector('#results');region.setAttribute('aria-busy', 'true');// 更新区域内容region.focus && region.focus();// 假设加载完成region.setAttribute('aria-busy', 'false');region.querySelector('button')?.focus();
});
4. 常见误区与实现要点
4.1 兼容性与行为差异
不同浏览器与辅助技术对 aria-busy 的实现可能存在差异，因此在实际项目中应进行多设备测试，不要把 aria-busy 作为唯一的可访问性反馈手段，需要结合 aria-live、role、aria-label 等提供综合反馈。
此外，在不需要异步更新的区域不应设置 aria-busy，以避免误导用户和辅助技术的读屏行为的混乱。
<div id="static-area" aria-busy="false">静态内容</div>
4.2 性能与可维护性考虑
在高频更新场景中，频繁切换 aria-busy 值 可能带来额外的读屏负担，应尽量将更新包裹在受控的区域，并尽量合并更新操作。
另外，代码层面应对 aria-busy 的状态进行集中管理，避免散落在各处的手动更改，以提升可维护性和一致性。
// 使用状态机管理 aria-busy
let isBusy = false;
function setBusy(state){isBusy = state;document.getElementById('content').setAttribute('aria-busy', String(state));
}
5. 实战示例：分页加载区域的实现
5.1 HTML 结构与初始状态
下面的示例展示一个简单的“分页加载”交互：点击按钮触发异步获取，加载期间区域标记为 aria-busy，加载完成后清除该标记并展示新内容。
此场景高度贴合本文的核心主题，能够清晰演示“<div> 区域正在更新”的可访问性语义。
<div id="results" aria-live="polite" aria-label="分页结果" role="region"><ul id="items">已加载的项</ul>
</div>
<button id="loadMore">加载更多</button>
5.2 实现逻辑与代码要点
在用户触发“加载更多”后，将 results 区域的 aria-busy 设置为 true，再通过异步请求获取数据，更新列表后再设置为 false，并通过 aria-live 提供新内容的可读信息。
以下代码展示了核心实现要点，注意将具体的 API 路径与数据结构替换为实际项目中的实现。
document.getElementById('loadMore').addEventListener('click', async function(){const region = document.getElementById('results');region.setAttribute('aria-busy', 'true');const itemsList = document.getElementById('items');try {const res = await fetch('/api/items?page=next');const data = await res.json();data.items.forEach(it => {const li = document.createElement('li');li.textContent = it.name;itemsList.appendChild(li);});} finally {region.setAttribute('aria-busy', 'false');}
});
