I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project has to do with accessibility.
When the page loads, the screen reader starts reading from the top of the page. When a user clicks on a particular link, we display a modal dialog. My question is: how do I interrupt the screen reader's reading of the main portion of the site and tell it to start reading the dialog text?
My modal container is wrapped in a div like this:
<div id=modalcontainer tabindex=0 class=popup role=dialog aria-labelledby=dialog-label >
The jQuery that fires the modal looks like this:
$(#modalLink).click(function (e) {
e.preventDefault();
$(#modalcontainer).center();
$(#modalcontainer).show();
$(#closeBtnLink).focus();
$(#wrapper).attr('aria-disabled', 'true');
});
The closeBtnLink is the close button within the modal dialog. I would have thought setting the focus on this would instruct the screen reader to start reading from that element.
The wrapper element is a SIBLING of the modal dialog. Per a suggestion from another SO user for different reasons, I set aria-disabled=true on the wrapper element that contains the entire page. The modal dialog exists as a sibling outside of this container.
My main goal here is to get the screen reader to read the contents of my modal DIV element when they click on a specific link. Any help would be appreciated.
