1

我有一个确认对话框，我想让它可以访问。这是我的 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 - 继续执行操作 - 对话框 继续执行操作 您将要执行操作 取消 提交第二级标题

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

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

怎样才能做到这一点？

4

1 回答 1

1

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

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

于 2015-01-23T18:39:27.640 回答