模态框打开时如何强制屏幕阅读器读取Toast提示？

问题原因 #

当带aria-modal="true"或正确配置的role="dialog"模态框处于激活状态时，屏幕阅读器会将模态框之外的所有内容从可访问性树中排除——这是模态框的核心隔离特性，目的是让用户专注于模态内的操作。你当前的Toast放在模态框外部，哪怕配置了aria-live，也会被这个隔离机制屏蔽，所以VoiceOver等工具不会读取它。

可行解决方案 #

方案1：将Toast嵌套到模态框内部（最可靠） #

把Toast的DOM节点直接放在模态框的容器里，这样它就属于模态框的可访问上下文，屏幕阅读器会正常监听这个内部的live区域。

修改后的示例结构：

<!-- 模态框容器 -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">更新个人信息</h2>
  <!-- 表单内容 -->
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" />
    <button type="submit">保存</button>
  </form>
  <!-- Toast放在模态框内部 -->
  <div
    role="alert"
    aria-live="assertive"
    aria-atomic="true"
    style="display: none;" <!-- 初始隐藏，触发时切换为显示 -->
  >
    <div>
      <header>保存成功!</header>
      <div>个人信息已更新</div>
    </div>
  </div>
</div>

注意：触发Toast时，要确保内容是动态更新的（或从隐藏状态变为显示并更新内容），aria-atomic="true"会让屏幕阅读器读取整个Toast区域的内容，而非仅变化部分。

方案2：调整模态框的隔离逻辑（不推荐，需手动处理） #

如果无法将Toast移入模态框，可以移除模态框的aria-modal="true"属性，转而给模态框之外的所有内容添加aria-hidden="true"，同时手动管理焦点：

• 模态框打开时，记录当前焦点元素，将焦点移到模态框内的第一个可交互元素（如保存按钮）；
• 模态框关闭时，将焦点返回到之前记录的元素；
• 保持模态框的role="dialog"和aria-labelledby关联标题的配置。

这种方法的风险较高，容易因为遗漏外部内容的aria-hidden设置、焦点管理不当，导致用户可以跳出模态框，破坏交互的专注性。

为什么原代码无效 #

你的Toast配置（role="alert"、aria-live="assertive"、aria-atomic="true"）本身是正确的，但由于它位于模态框外部，被模态框的可访问性隔离机制排除在屏幕阅读器的监听范围之外，所以无法被读取。

内容的提问来源于stack exchange，提问作者DumbDevGirl42069