ACCESSIBILITY
实时播报ARIA Live Region
页面局部变化（保存成功、条数更新、加载完成）时自动被屏幕阅读器朗读，不需要焦点移动。
效果预览
✓已保存 3 处修改
容器属性role="status"
错误播报role="alert"
适合用在哪
表单保存结果、列表条数变化、异步加载完成、购物车数量更新。
容易踩的坑
- 每次更新都重新插入整个 live 容器，屏幕阅读器根本不播报。
- 把表单校验错误全部设为 assertive，用户每输入一个字就被打断。
- 同一页面放多个 live 区域同时更新，播报内容相互覆盖，用户只听到最后一条。
设计提示词 · Prompt
实时播报（ARIA Live Region）：容器加 aria-live="polite"（不打断当前朗读，适合大多数提示）或 aria-live="assertive"（立即打断，仅用于错误/紧急）。再加 aria-atomic="true" 让它播报整个区域而不是变化的部分。更省事的方案是直接用 role="status"（等价 polite）或 role="alert"（等价 assertive）。要点：① 播报区域必须在 DOM 中始终存在（先建空容器，再往里写文字），动态插入整个节点往往不触发播报；② 不要用它播报纯装饰性内容，否则会变噪音；③ 频繁变化的内容要节流（如「已选 3 项」不要每毫秒播报）。
ARIA Live Region: give the container aria-live="polite" (doesn't interrupt current speech; suits most notices) or aria-live="assertive" (interrupts immediately; only for errors/urgent cases). Add aria-atomic="true" so the whole region is announced rather than just the changed part. A simpler option is role="status" (equivalent to polite) or role="alert" (equivalent to assertive). Key points: 1) the live region must always exist in the DOM (create an empty container first, then write text into it) — dynamically inserting the whole node often doesn't trigger announcements; 2) don't use it for purely decorative content, or it becomes noise; 3) throttle frequently changing content (e.g. don't announce "3 selected" every millisecond).
常见搭配
同一页面里经常和「实时播报」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="a11y-live">
<div class="a11y-live__ann"><em>✓</em>已保存 3 处修改</div>
<div class="a11y-live__tg"><b>容器属性</b><i>role="status"</i></div>
<div class="a11y-live__tg" style="margin-top:6px"><b>错误播报</b><i>role="alert"</i></div>
</div>
</div>