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中打开对话框时，下颚会读取它的内容： Enter - 继续操作 - 对话继续操作您即将继续操作取消提交标题二级

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

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

如何实现？

Answer 1

只需从对话框容器元素中删除aria-labelledby和aria-describedby，您就会好多了。一个好的最佳实践也是设置tabindex = -1而不是tabindex = 0，这样当你在对话框中选中时，你不会自动返回容器。

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

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

1 个答案: