javascript - 屏幕阅读器仅读取页面末尾的 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>

这三者之间确实没有太大区别，所以我不确定为什么感谢和 session 计时器的行为与用户调查弹出窗口不同。

其中，aria-modal 在 IE11 中不起作用，因为我可以通过 Tab 键退出对话框。

感谢任何帮助，

Answer 1

需要寻找的一些东西:

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

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

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