屏幕閱讀器僅讀取頁面末尾的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' ，則屏幕閱讀器將完成讀取正在讀取的內容，然后讀取更改。