Screen reader only reading Jquery dialog box at end of page

Question

I have three Jquery dialog boxes two of which work, in that once they open a screen reader will read it after it completes its previous sentence. However, the third, the surveyDialog, only gets read at the very end once it reads everything else on the screen.

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>

There really is not much difference between the three so I am not sure why the thank you and session timer are acting different than the user survey popup.

Among that, aria-modal is not working in IE11 as I am able to tab out of the dialog box.

Any help is appreciated,

Answer 1

A few things to look for:

1. aria-modal doesn't have much support yet so if you're expecting the browser to make everything "behind" the modal inactive, it might not work. You typically have to constrain the focus to the dialog yourself using JS.

2. You're using aria-live but from looking at your JS, I'm not sure you're using it correctly. aria-live is used on objects so that when the contents of that object changes (whether you add/remove DOM elements to the object or change the text that's displayed), the change will be announced. Hiding/unhiding does not correspond to a change that will be announced. When you change the display property from none to inline-block , the change will not be announced.

3. aria-live='assertive' means that no matter what the screen reader is currently saying, stop and announce the change for the aria-live region. assertive can also be thought of as "rude". So if the screen reader is in the middle of reading a sentence, it will stop in mid-sentence and read the change. If you use aria-live='polite' , the screen reader will finish reading whatever it was reading and then read the change.