Jamie Jamie - 4 months ago 19
jQuery Question

accessibility reading out modal message in Jaws

Hi there I have a modal using jquery UI although I'm struggling to make it accessible using JAWs. The code is included below, I need the text to be read out when the modal launches from a click on the calling page. Is there something I'm missing? I've added the aria-live="assertive" but it doesn't seem to make a difference.

The #RequestMessage text is loaded using ajax. Any advice greatly appreciated

Many thanks,

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all " style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px; height: auto; width: 633px; top: 466px; left: 355.5px;" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-VatInvoiceRequestModal"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-VatInvoiceRequestModal" unselectable="on">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div id="VatInvoiceRequestModal" aria-role="dialog" aria-describedby="RequestMessage" class="ui-dialog-content ui-widget-content" style="height: auto; min-height: 127px; width: auto;">

<div class="modal-header">

<a class="close-modal vat-modal" title="close" role="button" aria-label="close">
<img src="close_button.png" width="17" height="17" alt="">


<div class="modal-main" style="float: left;">

<img style="margin-left: auto; margin-right: auto; display: none;" id="VatInvoiceRequestProgress" src="ajax-loader-white.gif" alt="">

<p id="RequestMessage" style="tab-index: -1" aria-live="assertive">
some text
<a href="#" target="_blank">hyperlink text</a>

<div style="display: none"></div>

<div class="okay-button">

<button type="button" class="test-modal" aria-label="Close">






aria-live will only work when the tag is loaded at the time of rendering of page and not when it is added dynamically (at least not with Jaws and VoiceOver). There are a couple of approaches that you can follow:

  1. Add javascript to focus on #RequestMessage when it rendered. Also add a tag tabindex=0 to it so that it can be focussed.

  2. Add this tag somewhere at the source:


<p aria-live="assertive" role="alert" id="shouter" style="position: absolute !important; right: -1000px !important;" tabindex="-1"></p>

Then whenever you want something announced, just do $("#shouter").text("shout this")

I usually follow second approach there are multiple notifications from multiple source that are to be rendered. However if you are using only this modal as alert then first approach is much cleaner.