I have a popup that the user must click to fill out the form and submit the form. I do not want to leave the page, so the reason I use the pop-up window (also open for suggestions about this).
The problem I encountered is that JAWS (Screen Reader) does not recognize when a popup window opens. I tried to focus on one of the input fields inside the popup window, but it only reads that input field and then continues to read the original page. Ignores headers and everything else except focused input. Does anyone have an idea, maybe how can I warn the screen reader that a popup has opened, and then get the screen reader to read the popup and stop?
This is a button that when clicked displays a popup window:
<button type="submit" name="btnCreatee" id="btnCreate" value="#createIndexDialog">Create Index</button>
This is the HTML popup content:
<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 (AZ, az) 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 to make page 508 compatible / accessible.
source share