Unobtrusive alerts in a screen reader
Hello everyone,
I'm working on adding accessibility features to a Flex-based web-conferencing application called BigBlueButton, and have run into a problem with a chatroom module within the application.
In the module, there are a series of tabs: one public chat tab, one options tab, and any number of private chat tabs. I already have logic in place for notifying someone using a screen reader when there is a new public or private chat message, but I'm having trouble with the alert itself; basically, the application knows WHEN to notify the user, but not HOW.
My question is, does anyone know of a way in Flex ActionScript to force a screen reader to say something that is not on the screen? I want it to be able to say "New public messages" or "New private messages from <other user>" without triggering a disruptive alert box or messing with the tab order.
Any help would be greatly appreciated!
-Justin
Share: 
I have found a solution. However, it only works if the user is using the JAWS reader with Internet Explorer, or if they are using NVDA reader with Firefox. Neither reader produced results in Chrome.
At some point in the HTML page where the Flex application is displayed, add a div structured like so:
| Code: |
| <div id="notifications" aria-live="polite" role="region" aria-label="Chat Notifications"></div> |
Also in the HTML page, include this Javascript:
| Code: |
| var i = 1;
function addAlert(message){ var target = document.getElementById( 'notifications' ), contentDiv = document.createElement( "div" ); contentDiv.id = "alertDiv" + i; i++; contentDiv.innerHTML = message; contentDiv.style.display = "block"; target.appendChild( contentDiv ); target.hide(); target.setAttribute("role","alert"); target.show(); contentDiv.hide(); contentDiv.setAttribute("role","alert"); contentDiv.show(); } |
Finally, within the Flex application, use the flash.external.ExternalInterface to call the JavaScript method with the message you wish the screen reader to read:
| Code: |
| ExternalInterface.call("addAlert", message); |
As far as implementing the ExternalInterface so that it knows where to find the addAlert() method, I'm afraid I can't help you; the functionality was already present in my application and I just piggybacked off of it. But it works! Hopefully this is useful to anyone else developing accessible Flex applications.
Share: