javascript - 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 会像这样读取其内容:Enter - 继续执行操作 - 对话框 继续执行操作 您将要继续执行操作 取消 提交二级 header

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

预期行为:Enter - 继续执行操作 - 对话框您将继续执行操作等。

如何实现这一目标？

Answer 1

只需从对话框容器元素中删除 aria-labelledby 和 aria-scribedby 即可，效果应该会好得多。一个好的最佳实践也是设置 tabindex=-1 而不是 tabindex=0，这样当您在对话框中进行 Tab 切换时，就不会自动返回到容器。

您可能已经这样做了，但您应该确保使用键盘事件处理程序将焦点保持在对话框内。