利用HTML代码中的aria-busy通知屏幕阅读器页面正在加载-html教程-PHP中文网

aria-busy="true"仅在语义明确的动态内容容器（如role="region"的div、table）异步加载时使用，须在dom更新前设置、完成后显式设为false，不可用于body或按钮，且不能与aria-live混用。

利用html代码中的aria-busy通知屏幕阅读器页面正在加载

aria-busy="true" 什么时候该加

只有当页面某块区域（比如列表、表格、搜索结果区）正在异步加载内容，且用户仍可与其余部分交互时，才需要设 aria-busy="true"。它不是给整个页面加的 loading 状态遮罩，也不是替代 aria-live 的通用方案——如果只是刷新后播报新内容，用 aria-live 更合适。

常见误用场景：在按钮点击后全局加 aria-busy="true" 到，这会让屏幕阅读器暂停所有操作监听，反而阻断用户导航。

适用区域必须是**语义明确的容器**，如 <div role="region">、<code><table>、<code><ul></ul>
必须配合 aria-label 或 aria-labelledby，让屏幕阅读器知道“忙的是哪块”
加载结束必须显式设回 aria-busy="false" 或移除该属性，不能只靠 DOM 替换

怎么设置才被主流屏幕阅读器识别

不是写了 aria-busy="true" 就自动播报——JAWS、NVDA、VoiceOver 主要靠它来**暂停对该区域的焦点和读取行为**，而不是主动朗读“正在加载”。所以必须搭配视觉 loading 提示 + 明确的区域边界。

NVDA 19.0+ 和 VoiceOver（macOS 12+）会跳过 aria-busy="true" 区域的 tab 键聚焦和自动朗读
JAWS 默认不响应 aria-busy，需开启“智能模式”（Smart Navigation）才生效
不能依赖它触发语音提示，想让用户知道“正在加载”，得额外用 aria-live="polite" 区域发一句“内容加载中…”

示例：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<div role="region" aria-labelledby="search-results-label" aria-busy="true">
  <h2 id="search-results-label">搜索结果</h2>
  <p>加载中…</p>
</div>

和 aria-live、aria-disabled 混用的坑

aria-busy 和 aria-live 解决不同问题：前者是“别碰这块”，后者是“有更新请念出来”。两者同时用容易冲突——比如在 aria-busy="true" 区域里又放一个 aria-live="polite" 子元素，NVDA 可能忽略该子元素的更新播报。

不要给 aria-busy="true" 的容器内部再设 aria-live；想播报加载状态，把 aria-live 放在容器外部
aria-disabled="true" 是禁用交互，aria-busy="true" 是临时不可读，二者语义不同，不能互换或叠加使用
React/Vue 中动态切换 aria-busy 时，确保 DOM 更新完成后再设为 false，否则部分屏幕阅读器可能卡在“忙”状态不恢复

替代方案：什么时候干脆不用 aria-busy

如果加载区域没有独立语义、或者用户不需要在加载期间继续操作其他区域（比如全屏弹窗加载），直接用 aria-hidden="true" 配合视觉 loading 更稳妥。很多设计系统（如 GOV.UK、WCAG 推荐）已倾向用 role="progressbar" + aria-valuenow 替代纯 aria-busy。