嗨，这个问题我之前做项目时也碰到过，刚好有个很稳妥的解决方案，完全不用额外加隐藏容器就能搞定~

首先得搞清楚问题出在哪：你的toast容器用了role="status"，它本质上等价于aria-live="polite"，属于ARIA实时区域。屏幕阅读器会播报这个区域内所有内容的变化，包括关闭按钮的aria-label，所以才会出现多余的朗读内容。

我最推荐的解决方法是调整DOM结构，把实时区域的范围限定在需要播报的内容上：
把role="status"从整个toast容器移到只包含标题和文本的子容器里，关闭按钮放在这个实时区域的外面。这样屏幕阅读器只会读取标题和文本，按钮的aria-label不会被实时区域捕获，同时按钮本身依然是完全可访问的——毕竟它是标准的button元素，用户可以通过Tab键正常聚焦并操作它。

修改后的结构示例：

<div class="toast-notification">
  <!-- 仅将需要播报的内容放入实时区域 -->
  <div class="toast-notification__content" role="status">
    <div class="toast-notification__title">Information</div>
    <div class="toast-notification__text">Lorem ipsum dolor</div>
  </div>
  <!-- 关闭按钮放在实时区域外，不影响播报 -->
  <button aria-label="close">
    <!-- 关闭图标svg -->
  </button>
</div>

如果你实在没办法调整DOM结构，也可以试试给关闭按钮加aria-hidden="true"，但这里要注意：这个属性会让屏幕阅读器完全忽略按钮，所以你得额外确保按钮能被Tab键聚焦，并且绑定Enter/Space键的关闭事件，但这样会增加额外的代码工作量，还可能影响部分用户的操作体验，所以还是优先推荐调整结构的方案。

另外提个小细节：role="status"本身就是隐式的实时区域，不需要额外添加aria-live="polite"，两者选一个用就行，避免重复定义。

备注：内容来源于stack exchange，提问作者jimmy