Question

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.

Answer 1

It is your responsibility as a developer to present the content of a page in a way that makes it readable for the screenreader.

from http://www.anysurfer.be/en/index.html:

• Use the right HTML tags to structure your documents. By doing so, assistive technologies can translate headings, paragraphs, lists and tables to braille or speech in a comprehensible manner.
• Make sure that the website is also operable without using the mouse. In most situations, no special actions are required, except if – for instance – you use dropdown menus. This particular guideline is of great importance to visitors that are only able to use the keyboard.
• You can make your audio and video fragments accessible to visitors with an auditive or visual constraint by adding subtitles or by offering a transcription.
• Never solely rely on colors to convey structural information. The message ‘The fields in red are mandatory’ has no use for a blind person or someone who is colorblind.
• A refreshable braille display cannot display images. Therefore, you should add short descriptions for images and graphical buttons. They don’t appear on the screen, but they do get picked up by the screenreader software used by the blind and visually impaired.
• The use of technologies like Flash and JavaScript should be well-considered. Moreover, heavy animations and flickering are very disturbing for people who suffer from dyslexia or epilepsy.

But is ultimately the responsibility of the screen reader to make
sure that it stops and starts when it makes sense to the user, if not
possible the user should pause the reader itself.

Because of the large variety of screen readers out there, what you
are asking seems quite impossible.