Screen reader - jquery popup

Question

I have a pop up that a user must click in order to fill out a form and submit the form. I do not want to leave the page, hence the reason I am using a pop up (open to suggestions on this as well).

The issue I'm having here is that JAWS (screen reader) does not recognize when the pop up is opened. I tried setting focus to one of the input fields inside of the pop up, but it only reads that input field and then continues to read the original page. Ignores the headings and anything else besides the focused input. Anyone have an idea of maybe how I can alert the screen reader that a pop up has opened and then force the screen reader to read through the pop up and stop?

This is the button, when clicked, that shows the pop up:

<button type="submit" name="btnCreatee" id="btnCreate" value="#createIndexDialog">Create Index</button>

This is the HTML content of the pop up:

    <div id="createIndexDialog" class="window" style="background-color:#ffffff;">
<div align="right"><a href="#" class="closeIndexCreation" id="closeIndexCreation"></a></div>
    <h2 style="text-align:center;color:#333;">Create an Index</h2>
    <br />
    <ul class="statusMessages" style="background: transparent;"></ul>
    <form name="createIndexFrm" id="createIndexFrm" method="post" action="createIndex.do">
        <input type="hidden" name="operation" value="create">
        <div id="t" border="0">
            <div style="display:block;margin:0 0 15px 54px;">
                <span ><b>Name:</b><input type="text" class="requiredField" maxlength="16" name="name" id="name" size="40" onblur="checkform()" style="margin-left:8px;"></span>
            </div>
            <div style="display:block;margin:0 0 15px 104px;">
                <span>
                    <ul style="list-style:none;background:#fff;border:2px solid #ebebeb;padding:5px;border-radius:5px;width:auto;">
                        <li>Index name can not be changed later.</li>
                        <li>It is not case sensitive.</li>
                        <li>Specify from 1 to 30 characters using letters (A-Z, a-z) or numbers (0-9)</li>
                    </ul>
                </span>
            </div>
            <div style="display:block;margin:0 0 15px 54px;">
                <span ><b>Type:</b><input type="radio" name="data_source_type" value="0" checked style="margin-left:5px;"> Database, <i>Select data via database connection</i></span>
            </div>
            <div style="display:block;margin:0 0 15px 0px;">
                <span ><b>Display Name:</b><input type="text" maxlength="30" name="displayName" id="displayName" size="40" value="" style="margin-left:8px;"></span>
            </div>
            <div style="display:block;margin:0 0 15px 15px;">
                <span ><b>Description:</b><textarea name="desc" id="desc" cols="75" rows="3" wrap="virtual" style="margin-left:5px;"></textarea></span>
            </div>
            <div style="display:block;margin-left:240px;">  
                <span><button type="submit" class="general ui-corner-all" name="submitCreate" id="submitCreate" onclick="createIndexFrm.operation.value='create'; document.createIndexFrm.submit(); return false;">Create</button></span>
            </div>
        </div>
    </form></div>

This is the code that creates and displays the popup:

$('button[name=btnCreatee]').click(function(e) {
            e.preventDefault();
            var id = $(this).attr('value');
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            $('#mask').css({'width':maskWidth,'height':maskHeight});
            $('#mask').fadeIn(200);
            $('#mask').fadeTo("fast",0.8);
            var winH = $(window).height();
            var winW = $(window).width();               
            //$(id).css('top',  winH/2-$(id).height()/2);
            //$(id).css('left', winW/2-$(id).width()/2);
            //$(id).fadeIn(400);
            $('#createIndexDialog').css('left', winW/2-$('#createIndexDialog').width()/2);              
            $('#createIndexDialog').show();

        });

PS I am editing existing code in order to make the page 508 compliant/accessible.

Answer 1

In <div id="createIndexDialog"

add role="alertdialog"

This will help the screen reader recognise the popup.

Answer 2

Why are you making a new window? This will help:

window.open('windowname');

Answer 3

JQuery pop-ups are very nasty when it comes to 508 compliance. But there are couple of thing you can do to help JAWS better read it.

• Add the tag to bind each control to its labels.
• Group the form controls inside tag
• Is it possible for you to put the form inside an inline section of this page? That way you can keep the section hidden until required and then expand the page to show it to user.