0Pricing
HTML Academy · 课时

aria-hidden 和 aria-live

隐藏装饰性元素，并向屏幕阅读器播报动态内容

aria-hidden 和 aria-live 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

aria-hidden

aria-hidden="true" 会将元素从无障碍树中移除——屏幕阅读器会完全跳过它：

<!-- Decorative icon: visible but skip by screen readers -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 out of 5 stars</span>

<!-- Decorative separator -->
<img src="divider.svg" alt="" aria-hidden="true">

<!-- Note: aria-hidden does NOT affect visibility or tab focus
     A button with aria-hidden is still tabbable! -->

aria-hidden 的适用场景

aria-hidden 的适当使用场景：

<!-- 1. Icons next to descriptive text -->
<button>
  <svg aria-hidden="true"><!-- icon --></svg>
  Save Document
</button>

<!-- 2. Repeated text in a card link -->
<a href="/blog/post-1">
  <span aria-hidden="true">Read more</span>
  <span class="sr-only">Read more: HTML5 Forms Guide</span>
</a>

<!-- 3. UI decoration (dots, decorative borders) -->
<span aria-hidden="true">•••</span>

aria-hidden 的常见陷阱

切勿将 aria-hidden 应用于可获得焦点的元素：

<!-- BAD: button is in tab order but invisible to screen readers -->
<button aria-hidden="true">Close</button>

<!-- Users reach this via Tab but hear nothing
     They cannot tell if they're on a button or lost focus -->

<!-- If you want to hide from both: use hidden attribute -->
<button hidden>Close</button>

<!-- Or: disabled (but disabled removes from tab order) -->
<button disabled aria-hidden="true">Close</button>

aria-live

aria-live 会将区域变为实时区域——更改会自动播报：

<!-- polite: announce when user is idle -->
<div aria-live="polite" id="status"></div>

<!-- assertive: announce immediately, interrupting current speech -->
<div aria-live="assertive" id="errors"></div>

<script>
// Inject text to trigger announcement:
document.getElementById('status').textContent = 'File saved successfully.';
// Screen reader announces this without user moving focus
</script>

aria-live 的值

aria-live 的三个值：

  • off ——默认值：不播报更改
  • polite ——用户暂停时播报；用于非紧急更新
  • assertive ——立即播报并打断当前内容；用于错误和关键警报

aria-atomic

aria-atomic 控制播报整个区域，还是仅播报发生更改的部分：

<div aria-live="polite" aria-atomic="true" id="timer">
  Time remaining: 05:00
</div>
<!-- aria-atomic="true": announce the whole div each update -->
<!-- Without it: only the changed text node is announced
     'Time remaining: 05:00' vs just '05:00' -->

<script>
setInterval(() => {
  document.getElementById('timer').textContent = `Time remaining: ${getTime()}`;
}, 1000);
</script>

aria-relevant

aria-relevant 指定播报哪些类型的更改：

<div
  aria-live="polite"
  aria-relevant="additions text"   <!-- announce added content and text changes -->
  id="feed"
>
  <!-- New items added here -->
</div>
<!-- Values: additions, removals, text, all
     Default: additions text
     aria-relevant="removals" needed to announce deleted items -->

实时区域最佳实践

实时区域的使用指南：

  • 每种播报类型使用一个持久的实时区域（不要反复创建和销毁）
  • 从空内容开始；注入文本以触发播报
  • 播报内容应简洁——屏幕阅读器可能会打断播报，或播报进度落后
  • 对于加载状态：使用 polite
  • 对于表单错误：使用 assertive 或 role="alert"

Toast 通知模式

使用实时区域播报 Toast 通知：

<div
  role="status"
  aria-live="polite"
  aria-atomic="true"
  id="toast-container"
  class="sr-only"
></div>

<script>
function showToast(message) {
  const container = document.getElementById('toast-container');
  container.textContent = '';
  // Force rerender for re-announcement:
  requestAnimationFrame(() => {
    container.textContent = message;
  });
}
</script>

aria-busy

aria-busy="true" 表示内容正在更新：

<div id="feed" aria-live="polite" aria-busy="false">
  <!-- content -->
</div>

<script>
const feed = document.getElementById('feed');
feed.setAttribute('aria-busy', 'true');

await loadContent();
feed.innerHTML = newContent;

feed.setAttribute('aria-busy', 'false');
// Only now does the live region announce the update
</script>

快速检查

什么时候应使用 aria-live="assertive"，什么时候应使用 aria-live="polite"？

复习：aria-hidden 和 aria-live

隐藏内容和实时区域的要点：

  • aria-hidden="true" ——从无障碍树中移除（不能用于可获得焦点的元素！）
  • aria-live="polite" ——用户空闲时播报更改
  • aria-live="assertive" ——立即播报（用于错误）
  • aria-atomic="true" ——发生更改时播报整个区域
  • aria-busy ——加载期间抑制播报

常见问题解答

「aria-hidden 和 aria-live」课时是免费的吗？

是的 — 「aria-hidden 和 aria-live」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「aria-hidden 和 aria-live」这节课中我会学到什么？

隐藏装饰性元素，并向屏幕阅读器播报动态内容 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「aria-hidden 和 aria-live」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 何时使用 ARIA，何时使用原生 HTML
  2. role、button、alert、dialog 和地标
  3. aria-label、aria-labelledby 和 aria-describedby
  4. aria-hidden 和 aria-live
← 返回 HTML Academy