ARIA Live Regions：动态内容通告与无障碍实践

---

title: ARIA Live Regions：动态内容通告与无障碍实践

keywords:

• aria-live
• polite
• assertive
• aria-atomic
• 屏幕阅读器

description: 介绍 ARIA Live Regions 的属性与行为（aria-live/aria-atomic/aria-busy），用于动态内容通告（如提示、更新），兼顾用户注意力与可达性，提供示例与建议。

categories:

• 文章资讯
• 编程技术

---

概述

ARIA Live Regions 让屏幕阅读器在内容变化时发声提示。通过 aria-live="polite|assertive" 控制提示优先级，aria-atomic 决定通告范围，适用于异步加载、表单反馈与状态更新。

示例

<div id="status" aria-live="polite" aria-atomic="true"></div>
<script>
document.getElementById('status').textContent = '已保存'
</script>

工程建议

• 优先级选择：非关键更新用 polite；错误与重要提示用 assertive 且谨慎使用，避免打断。
• 原子性与忙碌：在大块更新时配置 aria-atomic；加载中设置 aria-busy="true"。
• 与视觉一致：同时提供可见提示与 SR 通告；避免仅语音提示。

参考与验证

• MDN ARIA live 文档：https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
• WAI-ARIA 规范：https://www.w3.org/TR/wai-aria-1.2/
• WebAIM 实践指南：https://webaim.org/techniques/aria/#live