JAWS 屏幕阅读器误读确认对话框消息.IE11.

Question

我有一个确认对话框，我想让它可以访问。这是我的 HTML：

<div class="confirm-dialog row-fluid">
<div class="content" role="dialog" tabindex="0" aria-labelledby="confirm-popup-header" aria-describedby="confirm-popup-subheader">
   <h2 id="confirm-popup-header">Proceed with an action</h2>
   <h4 id="confirm-popup-subheader">You are about to proceed with an action</h4>
   <div>
       <button class="btn btn-large btn-primary btn-app-secondary">Cancel</button>
       <button class="btn btn-large btn-primary btn-app-primary">Submit</button>
   </div>
</div>

同样在我的脚本中的某个地方，当对话框变得可见时，我将焦点设置为对话框：

$('.confirm-dialog .content').focus();

然后在IE11中，当对话框打开时，jaws会读出这样的内容：输入 - 继续操作 - 对话框 继续执行操作 您将要继续执行操作 取消提交 标头级别二

JAWS 首先读取标头，然后读取

标头，然后读取其余内容。这就是问题所在。

预期行为：输入 - 继续操作 - 对话框 您将要继续操作等。

如何实现这一点？

Answer 1

只需从对话框容器元素中删除aria-labelledby和aria-describedby，您应该会好得多。一个好的最佳做法是设置 tabindex=-1 而不是 tabindex=0，这样当您在对话框中按 Tab 键移动时，不会自动返回到容器。

您可能已经在执行此操作，但应确保使用键盘事件处理程序将焦点保持在对话框中。