让屏幕阅读器读取 javascript 创建的对话框中的内容

Question

我正在使用 javascript 库 vex 来输出这样的对话框

当我将它与屏幕阅读器（旁白）一起使用时，该文本不会被读取，因此我尝试更改 vex 中用于操作 DOM 的 javascript。

生成的 DOM 变成了这样

<div class="vex vex-theme-default" role="dialog">
   <div class="vex-content">
      <form class="vex-dialog-form">
         <div class="vex-dialog-message" tab-index="0"
            aria-label="Login failed">Login failed!</div>
         <div class="vex-dialog-input"></div>
         <div class="vex-dialog-buttons">
            <button type="submit"
              class="vex-dialog-button-primary btn vex-dialog-button vex-first">Ok</button>
         </div>
      </form>
   </div>
</div>

但即使使用此标记也不会读取消息“登录失败”。

为什么不呢？

（我还在 div 上调用了.focus()，类为vex-dialog-message）。

屏幕阅读器将改为在尝试登录时按下按钮后继续阅读文本（即运行试图登录的 ajax 请求，因此永远不会重新加载文档）。

Answer 1

这就是role="alert" 的用途。

它会用任何即时重要的信息打断屏幕阅读器（因为它相当于aria-live="assertive"）。

由于这是一个对话框，您可能希望查看 role="alertdialog" 来替换您的 role="dialog"。

此外，当您关注警报时，不要出现“登录失败！”发短信tabindex="0"。

改为使用tabindex="-1"，这样您仍然可以以编程方式聚焦它，但它不会以页面的聚焦顺序结束。

由于您的“确定”（提交）按钮位于表单中，因此您当前使用的模式将很难（并非不可能）正确，因此这会将屏幕阅读器发送到“表单模式”，其行为与正常阅读不同模式。

因此，如果您能够创建自定义组件，则有一个 great writeup from deque on how best to implement an alertdialog

此处使用的标记示例如下，请注意使用aria-describedby 和aria-labelledby 以最大限度地提高正确读取警报的机会：

    <div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText">
        <h1 id="alertHeading">Warning! Street Address Mismatch!</h1>
        <div id="alertText">
            <p>The street address you entered does not match the Postal Code Data.</p>
            <p>Is this the correct format: 12345 Main St. Blvd.?</p>
        </div>
        <button id="yes">Yes, Format Is Correct</button>
        <button>No, Edit Street Address</button>
    </div>