排除按钮 aria 标签在 aria 实时区域中大声朗读

Question

在我们的前端，我们向用户显示 toast 通知，以便通知状态更新，例如任务成功完成或由于获取操作失败而导致的错误通知。

每个通知都基于以下结构：

<div class="toast-notifiaction" role="status">
  <div class="toast-notification__title">Information</div>
  <button aria-label="close">
    <!-- contains a close icon as inline svg -->
  </button>
  <div class="toast-notification__text">Lorem ipsum dolor</div>
</div>

背后的想法是类似于

aria-live="polite"

的非破坏性行为。不幸的是，不可能排除关闭按钮被大声读出的情况。期望的行为是读出：“信息。Lorem ipsum dolor”。

如果不定义包含所需文本的不可见

div

，这可能吗？

Answer 1

发生这种情况是因为 状态角色，以及默认为您想要的

aria-live="polite"

，也默认为

aria-atomic="true"

，这听起来像是您不想要的。 （您可以在此处了解有关此属性的更多信息）

如果您在活动区域上显式设置

aria-atomic="false"

来覆盖默认值，您应该会获得所需的行为。