Question

我有三个Jquery对话框，其中两个工作，因为一旦打开屏幕阅读器，它将在完成上一个句子后读取它。然而，第三个，调查对话，只有在读完屏幕上的其他内容后才会在最后读取。

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

要寻找的一些事项：

aria-modal还没有得到很多支持，所以如果你期望浏览器能够做出所有的事情，那么......＆＃34;模态不活动，可能不起作用。您通常必须使用JS自己将焦点约束到对话框。
您正在使用aria-live但是通过查看您的JS，我不确定您是否正确使用它。 aria-live用于对象，以便当该对象的内容发生更改时（无论是向对象添加/删除DOM元素还是更改显示的文本），都将公布更改。隐藏/取消隐藏与将要公布的更改不对应。当您将display属性从none更改为inline-block时，更改将不公布。
aria-live='assertive'表示无论屏幕阅读器当前说什么，请停止并宣布aria-live区域的更改。 assertive也可以被视为＆＃34;粗鲁＆＃34;。因此，如果屏幕阅读器正在阅读句子，它将在句子中间停止并阅读更改。如果您使用aria-live='polite'，屏幕阅读器将完成正在阅读的内容，然后阅读更改。

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

1 个答案: