我们正在使用jquery弹出模态对话框,只是为了在用户开始使用应用程序的主要部分之前提醒用户一些信息。没有什么复杂的,但是不知何故,我测试过的所有浏览器/屏幕阅读器组合都无法读取对话框的全部或部分内容。
我已经测试了IE8/JAWS15、Firefox/JAWS15和Chrome/Chromevox。
以下是对话框本身的HTML。
这是我们使用的jqueryUI脚本,用于将其变为对话框并显示出来。
当点击按钮时,对话框可以正常弹出,屏幕阅读器通常会说“对话框”和可能的标题,但从来不会说对话框的实际文本。
您可能会注意到有两个id为“divBrowserMessagePopup”的div,我认为这可能是问题的原因。我将其删除后,对话框实际上确实起作用了......但仅在火狐浏览器中。
有任何想法为什么对话框的文本总是被跳过?
我已经测试了IE8/JAWS15、Firefox/JAWS15和Chrome/Chromevox。
以下是对话框本身的HTML。
<div id="divBrowserMessagePopup" class="ui-dialog-content ui-widget-content" aria-labelledby="divBrowserMessageTitle" aria-describedby="divBrowserMessage" hidden style="width: auto; min-height: 150px; height: auto; padding: 0px; border: 0px none;">
<div id="divBrowserMessageUserPopup">
<div class="modelpopup" style="border:0">
<div class="modelpopup-top">
<span class="sprite close" id="browserMessage-popupclose"></span>
<div id="divBrowserMessageTitle"> <h1>Title of Dialog</h1></div>
</div>
<div class="modelpopup-content">
<div id="divBrowserMessage">this is a very important message we want the user to "see!"</div>
</div>
<div class="model-button">
<button class="button-lrg-pri float-right" id="btnBrowserMessageOk">OK</button>
</div>
</div>
</div>
</div>
这是我们使用的jqueryUI脚本,用于将其变为对话框并显示出来。
$('#divBrowserMessagePopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
width: '450px',
open: function (event, ui) {
$(this).css({ 'padding': '0', 'border': 0 });
}
});
$("#showDialog").click(function (e) {
$('#divBrowserMessagePopup').dialog('open');
e.preventDefault ? e.preventDefault() : event.returnValue = false;
});
当点击按钮时,对话框可以正常弹出,屏幕阅读器通常会说“对话框”和可能的标题,但从来不会说对话框的实际文本。
您可能会注意到有两个id为“divBrowserMessagePopup”的div,我认为这可能是问题的原因。我将其删除后,对话框实际上确实起作用了......但仅在火狐浏览器中。
有任何想法为什么对话框的文本总是被跳过?