Friday, November 11, 2011

Iframe and JAWS screen reader


Issue: Iframe was recognized by the screen reader but the content was not being read. This is extremely necessary for ADA compliance of websites.
Software: JS highslide, JAWS
Oddly enough the firefox plugin for emulating screen readers - fangs was reading the screen reader just fine and so was NVDA.

So here's the issue - when an inline frame is fired from a parent page, the focus is not automatically set to the frame, you have to manually set it. For regular frames, not using any plugins, using window.onload() function would work, but with the highslide plugin, that does not work, but the window loads inside the scope of the plugin and it just renders it later. So the onload function is actually called much before the frame is rendered. So here's the workaround.
In the iframe, make a dummy anchor tag, since anchor tags are easy to give focus to. like <a id="focus" href="#"></a>
On the parent frame, with the hs.expand call :
you will need to put this in the document.ready() function:

hs.Expander.prototype.onAfterExpand = function(sender){
            var body = sender.body;

            var iframe = window.frames[this.iframe.name],
               doc = iframe.document;
          
             doc.getElementById("focus").focus();
             doc.getElementById("focus").blur();
        }
So focus will set the focus on the a tag, which sometimes causes a cursor to appear. You could use the
style.cursor='not-allowed'; but I was having trouble with FF 8 on Windows 7. So I decided 
tto blur() the anchor tag.
A few quick notes:
1. display:none will not work - naturally focus cannot be set on an element that doesn't have a display.
2. I did add ARIA properties to the anchor tag to make sure it is read outloud and added the contents of the iframe as the alt attribute to the anchor tag:
tabindex ="-1" style="font-size:-1px" aria-live="assertive" aria-atomic="true"

Labels: , ,