本文介绍在 toast 通知中使用 role="status" 实现无障碍实时播报时，如何避免关闭按钮的 aria-label 被屏幕阅读器重复朗读，核心方案是将交互控件移出 aria-live 区域结构。
本文介绍在 toast 通知中使用 `role="status"` 实现无障碍实时播报时，如何避免关闭按钮的 `aria-label` 被屏幕阅读器重复朗读，核心方案是将交互控件移出 `aria-live` 区域结构。
在构建可访问的前端 toast 通知时，常借助 role="status"（隐式对应 aria-live="polite"）实现非中断式状态播报。但若将关闭按钮直接嵌套在该语义区域内，其 aria-label="close" 会被屏幕阅读器一并朗读，导致播报内容变为“Information. Lorem ipsum dolor. Close”，干扰用户对关键信息的理解。
根本原因在于：ARIA 实时区域会无差别播报其内部所有文本内容（包括按钮的 aria-label），且无法通过 aria-hidden 等属性 selectively 过滤——一旦设为 aria-hidden="true"，按钮将同时丧失键盘和语音控制可访问性，严重违反 WCAG 2.1 原则（如 2.1.1 键盘、2.5.3 标签名称）。
✅ 正确解法：结构分离——将交互控件（关闭按钮）置于实时区域之外，仅让纯信息容器承担播报职责。示例如下：
<div class="toast-notification">
<!-- 关闭按钮完全独立于 live 区域 -->
<button aria-label="Close notification" class="toast-notification__close">
<svg viewbox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></button>
<!-- 仅此 div 承载播报语义 -->
<div role="status" class="toast-notification__content" aria-live="polite">
<div class="toast-notification__title">Information</div>
<div class="toast-notification__text">Lorem ipsum dolor</div>
</div>
</div>
? 关键要点：
-
role="status"应仅包裹需播报的静态文本内容（标题 + 描述），不包含任何交互元素； - 关闭按钮需保留完整可访问性：
aria-label明确描述功能、focusable、支持键盘操作（Enter/Space）； - CSS 布局需适配新结构（如通过 Flex/Grid 重排按钮与内容位置），不影响视觉呈现；
- 若 toast 自动销毁（如 5 秒后消失），仍需确保：① 提供手动关闭途径（不可仅依赖自动关闭）；② 播报时长足够用户理解（建议 ≥ 8 秒或允许暂停）；③ 避免在播报中途关闭导致信息截断。
⚠️ 替代方案（不推荐）：
强行用 aria-hidden="true" 隐藏按钮虽能阻止朗读，但会使按钮对屏幕阅读器、语音命令工具（Dragon）、开关控制设备完全不可见——这属于严重可访问性缺陷，应严格避免。
综上，结构重构是最符合 Web 可访问性标准（WCAG AA）且长期可维护的方案。它既保障了信息播报的纯净性，又完整保留了用户对通知的完全控制权。
