CODEWITHSUNDEEP
jquery-uiaccessibilityscreen-readersjaws-screen-reader
CodeRedick
CodeRedick

Reputation: 7415

Why are screenreaders not speaking this dialog correctly?

We have a modal dialog being popped up using jquery, just to alert a user of some info before they start using the main part of the application. Nothing complex, but for some reason all the browser/screenreader combinations I've tested with fail to read all or part of the dialog.

I've tested with IE8/JAWS15, Firefox/JAWS15 and Chrome/Chromevox.

Here is the HTML for the dialog itself.

<div id="divBrowserMessagePopup" class="ui-dialog-content ui-widget-content" aria-labelledby="divBrowserMessageTitle" aria-describedby="divBrowserMessage" hidden style="width: auto; min-height: 150px; height: auto; padding: 0px; border: 0px none;">
    <div id="divBrowserMessageUserPopup">
        <div class="modelpopup" style="border:0">
            <div class="modelpopup-top">
                <span class="sprite close" id="browserMessage-popupclose"></span>
                <div id="divBrowserMessageTitle"> <h1>Title of Dialog</h1></div>
            </div>
            <div class="modelpopup-content">
                <div id="divBrowserMessage">this is a very important message we want the user to "see!"</div>
            </div>   
            <div class="model-button">
                <button class="button-lrg-pri float-right" id="btnBrowserMessageOk">OK</button>
            </div>     
        </div>
    </div>
</div>

Here is the jqueryUI script we're using to make it a dialog and show it.

$('#divBrowserMessagePopup').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: '450px',
        open: function (event, ui) {
            $(this).css({ 'padding': '0', 'border': 0 });
        }

    });

$("#showDialog").click(function (e) {
        $('#divBrowserMessagePopup').dialog('open');

        e.preventDefault ? e.preventDefault() : event.returnValue = false;       
    });

When the button is clicked, the dialog pops up just fine and the screenreader will usually speak "dialog" and possibly the title, but never the actual text of the dialog.

You might note that there are two divs with id "divBrowserMessagePopup," which I thought might be causing the problem. I removed it, and the dialog actually did work... but ONLY in Firefox for some reason.

Any idea why the text of the dialog would always be getting skipped?

Upvotes: 3

Views: 3773

Answers (1)

unobf
unobf

Reputation: 7244

Do the following:

  1. Set tabindex="-1" on the "divBrowserMessagePopup" dialog
  2. Change $('#divBrowserMessagePopup').dialog('open'); to $('#divBrowserMessagePopup').dialog('open').focus(); - note that you might have to do the focus inside a timeout because of animation delays
  3. Set role="dialog" on "divBrowserMessagePopup"
  4. Set role="document" on "divBrowserMessageUserPopup"
  5. Remove aria-labelledby and aria-describedby from "divBrowserMessagePopup"

The rationale is the following:

First screen readers only read what is focussed (or at the SR buffer read position) so if you do not set focus, the SR will not know what to read. the first two steps above are to do that.

Second screen reader users can use the DOM navigation to discover new content, and the SR will automatically start reading the content of whatever gets focus, so you do not need the extra labelling for the dialog div but you should tell the SR what the role of the different components is. The last 3 steps will do that for you.

Finally, you will want to trap the focus in the dialog so that the screen reader cannot get out unless they click "OK". The steps to do this are not included here because they are off topic.

Upvotes: 8

Related Questions