我有三个Jquery对话框，其中两个有效，它们一旦打开，屏幕阅读器就会在完成上一句话后对其进行阅读。但是，第三个，surveyDialog，只有在读取屏幕上的所有其他内容后才被读取。
的HTML
<div class="body-content" style="padding: 4px 0">
<a id="main_content" tabindex="-1" name="main_content"></a>
<!-- <h1>Main Content</h1> -->
<!-- <p>This is the main content area. -->
<tiles:insertAttribute name="body" />
</div>
<div id="thankYou" class="thankClass" role="dialog" aria-live="assertive" aria-labelledby="thankDialog" aria-modal="true" >
<span class="ui-icon ui-icon-alert" ></span><p>Thanks for visiting the Website!</p>
</div>
<div id="dialog-confirm" class="modalClass" role="dialog" aria-live="assertive" aria-labelledby="surveyDialog" aria-modal="true">
<span class="ui-icon ui-icon-alert" ></span><h5>Thanks for visiting the Website! We welcome your feedback. <br/> Would you be willing to participate in a brief survey <br/>to help us improve your experience?</h5>
</div>
<div id="dialog-timeout" class="timeoutClass" aria-live="assertive" role="dialog" aria-labelledby="sessionDialog" aria-modal="true">
<span class="ui-icon ui-icon-alert" ></span><p>Your session may expire soon, do you want to extend it?</p>
</div>
JS
<script type="text/javascript">
$(function() {
'use strict';
var inactivityWarningTime = ${Constant.INACTIVITY_WARNING_TIME_MILLISECONDS};
document.getElementById("dialog-timeout").style.display='none';
document.getElementById("dialog-confirm").style.display='none';
document.getElementById("thankYou").style.display='none';
var setInactivityTimeout = function() {
var twentySevenMinutesInMilliseconds = inactivityWarningTime;
console.log('Starting timer for: '+twentySevenMinutesInMilliseconds)
return setTimeout(function() {
document.getElementById("dialog-timeout").style.display='inline-block';
$('#dialog-timeout').bind('dialogopen', function(event, ui) {
//timeoutDialogOpen = true;
$('#dialog-timeout').parent().siblings('.ui-dialog-buttonpane').find('button')[0].focus();
});
$("#dialog-timeout").dialog({
appendTo:"#nbarDiv",
resizable:false,
draggable:false,
closeText: "close",
closeOnEscape:false,
height: 150,
width: 450,
modal:true,
buttons:{
"OK":function(){
document.getElementById("dialog-timeout").style.display='none';
//timeoutDialogOpen = false;
$(this).dialog("close");
console.log('extending session...');
var test = window.open("/DELWeb/secExtendSession", 'myWindow', 'resizable=yes,width=500,height=500,scrollbars=yes');
setInactivityTimeout();
},
"Cancel":function(){
document.getElementById("dialog-timeout").style.display='none';
//timeoutDialogOpen = false;
$(this).dialog("close");
}
},
open: function() {
console.log('open called');
}
});
}, twentySevenMinutesInMilliseconds);
}
<c:if test="${not empty userRole}">
// Dont ping the portal or have an inactivity timer if the user is not logged in.
var inactivityTimer = setInactivityTimeout();
//pingLocalServerAndPortal();
</c:if>
var sendSurvey = function(){
var y = document.getElementById("thankYou");
y.style.display='none';
var x = document.getElementById("dialog-confirm");
x.style.display='inline-block';
$('#dialog-confirm').bind('dialogopen', function(event, ui) {
console.log('opened survey');
$('#dialog-confirm').parent().siblings('.ui-dialog-buttonpane').find('button')[0].focus();
});
$("#dialog-confirm").dialog({
appendTo:"#main_content",
resizable:false,
draggable:false,
closeText: "close",
closeOnEscape:false,
height: 150,
width: 450,
describedBy : "description",
modal:true,
buttons:{
"Yes":function(){
console.log("Ajax Call to survey");
$(this).dialog("close");
window.location.href="pubSendingSurvey";
},
"No":function(){
$.ajax({
url: "pubCloseSurvey",
data: "fakeData"
});
$(this).dialog("close");
var y = document.getElementById("thankYou");
y.style.display='inline-block';
$('#thankYou').bind('dialogopen', function(event, ui) {
console.log('thanks');
$('#thankYou').parent().siblings('.ui-dialog-buttonpane').find('button')[0].focus();
});
$("#thankYou").dialog({
appendTo:"#nbarDiv",
resizable:false,
draggable:false,
closeText: "close",
closeOnEscape:false,
height: 150,
width: 450,
modal:true,
buttons:{
"Close":function(){
$(this).dialog("close");
}
}
});
}
}
});
}
<c:if test="${not empty SURVEYPOP }">
<c:if test="${(userRole!=Constant.ADMIN_ROLE)}">
<c:if test="${(userRole!=Constant.ADMIN2_ROLE)}">
sendSurvey();
</c:if>
</c:if>
</c:if>
});
</script>
两者之间确实没有太大区别，所以我不确定为什么谢谢和会话计时器的作用不同于用户调查弹出窗口。
其中，aria-modal在IE11中不起作用，因为我可以跳出对话框。
任何帮助表示赞赏，
最佳答案
需要注意的几件事：aria-modal尚无太多支持，因此，如果您希望浏览器将模式背后的所有内容都置于非活动状态，则它可能无法工作。通常，您必须自己使用JS将焦点限制在对话框上。
您正在使用aria-live，但是从查看JS的角度来看，我不确定您是否正确使用了它。 aria-live用于对象，以便当该对象的内容更改时（无论您向该对象添加/删除DOM元素还是更改显示的文本），更改都会被宣布。隐藏/取消隐藏与将要宣布的更改不对应。当您将display属性从none更改为inline-block时，将不会宣布更改。aria-live='assertive'表示无论屏幕阅读器当前在说什么，都停止并宣布aria-live区域的更改。 assertive也可以被认为是“粗鲁的”。因此，如果屏幕阅读器正处于阅读句子的中间，它将在句子中间停止并朗读更改。如果使用aria-live='polite'，则屏幕阅读器将完成读取的内容，然后读取所做的更改。
关于javascript - 屏幕阅读器仅读取页面末尾的Jquery对话框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49501659/