如何通过跳过正在阅读的内容来阅读 JAWS 中的 jquery modal popup DIV 元素？答案

【问题标题】：How to read jquery modal popup DIV elements in JAWS by skipping what it was reading?如何通过跳过正在阅读的内容来阅读 JAWS 中的 jquery modal popup DIV 元素？
【发布时间】：2014-07-22 18:29:12
【问题描述】：

我们有一个使用 jQuery 来显示模式弹出窗口的网站。当用户单击我们的一个按钮时，我们正在将模式弹出窗口加载/绑定到 DIV，然后在叠加层顶部显示一个包含实际弹出窗口的 DIV。那么，当它弹出时，我怎样才能在模态框内获得焦点，以便屏幕阅读器停止它的工作并开始在模态框内阅读。

 $("#EditPageForm").dialog({
                     autoOpen: true,
                     position: { my: "center", at: "center", of: window },
                     width: 650,
                     resizable: false,
                     title: 'Edit Page',
                     modal: true,
                     open: function () {
                         $(this).load('@Url.Action("EditPage", "Page")');  
                         $(this).focus();

                     },
                     buttons: {....}
});

$(this).focus();并没有真正专注于弹出窗口。

谢谢

【问题讨论】：

标签： jquery modal-dialog accessibility screen-readers jaws-screen-reader

【解决方案1】：

Jquery 焦点仅适用于可聚焦元素。表格或链接。

存储当前焦点位置，在打开弹窗之前对页面中的每个表单和链接使用tabindex=-1，在弹窗上使用tabindex=0并对其进行对焦。关闭弹出焦点时存储的焦点位置。

使用此解决方案，无法将焦点放在弹出窗口的“下方”。并在关闭弹出窗口后检索位置。

【讨论】：