屏幕阅读器仅读取页面末尾的Jquery对话框

Question

我有三个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中不起作用，因为我可以跳出对话框。

任何帮助表示赞赏，

Answer 1

需要注意的几件事：

1. aria-modal还没有太多支持，因此，如果您希望浏览器使modal后面的所有内容都处于非活动状态，则它可能无法正常工作。 通常，您必须自己使用JS将焦点限制在对话框上。

2. 您正在使用aria-live但是通过查看JS，我不确定您是否正确使用了它。 aria-live用于对象，因此，当该对象的内容发生更改时（无论您向该对象添加/删除DOM元素还是更改所显示的文本），更改都会被宣布。 隐藏/取消隐藏与将要宣布的更改不对应。 当您将display属性从none更改为inline-block ，更改不会被宣布。

3. aria-live='assertive'意味着无论屏幕阅读器当前在说什么，都应停止并宣布aria-live地区的更改。 assertive也可以被认为是“粗鲁的”。 因此，如果屏幕阅读器正处于阅读句子的中间，它将在句子中间停止并朗读更改。 如果您使用aria-live='polite' ，则屏幕阅读器将完成读取正在读取的内容，然后读取更改。