Making iframes content Web accessible for screen readers

September 18, 2008 by MK
Filed under web accessibility

Recently I was working on a web project which was extensively using iframes for dynamically displaying a lot of content. The initiating action was Mouse click by the user. I was reading the content from an XML file using javascript and was displaying the info in an iframe.

Now my biggest concern was to send a notification to screen readers to start reading only the dynamically loaded part of the page. While doing some research on the internet I found 2 extremely good articles on accessibility using javascript and AJAX.

This article explains the impact of device dependent event handlers on accessibility and how this can be gracefully handled by using device independent event handlers.

http://www.webaim.org/techniques/javascript/eventhandlers.php

Event handlers accompany existing HTML code and are triggered by a browser or user event - such as when the page loads, when the user clicks the mouse, or when the time is 8 p.m. Some event handlers are dependent upon use of a mouse or keyboard. These are called device dependent event handlers. Other event handlers are device independent and are triggered by both the mouse and keyboard or by other means. Using device dependent event handlers may cause the content to be inaccessible to someone that is not able to use the device that is required for that specific event handler.

The second article explains about screen readers and how screen readers and accessibility tools like Jaws and Window-Eyes work. This article also explains about measures that can be taken to let screen readers talk to dynamic content that is generated using AJAX, as and when its updated.

http://juicystudio.com/article/making-ajax-work-with-screen-readers.php

To understand the issues behind ensuring that Ajax is accessible to screen readers, it’s essential to have an understanding of how screen readers work. To allow screen reader users to read and interact with web content, screen readers take a snapshot of the web page, and place this content in a virtual buffer. The screen reader uses the virtual buffer to allow the user to navigate the content. Without the virtual buffer, the screen reader only has access to the parts of the page that are focusable by non-assistive user agents, such as anchors and interface elements. Without the virtual buffer, the user cannot interact with other elements and their child nodes in the content, such as images, lists, tables, and so on. Screen readers have their own specific name for the virtual buffer, such as Virtual Focus mode in Supernova, but they essentially do the same job.

Now lets come back to my problem of making the content of iframes readable by screen readers when user clicks on a particular link. ECMAScript focus method can be used to place focus to the part of the page that has changed. For this to work, the target element needs to be an element that can receive focus. In HTML (and XHTML) the only elements that can receive focus are the a, area, button, input, object, select, and textarea elements. I used a read only text area and gave it focus as soon as its loaded.

I used the following code in the iframe -

<html>

<head>

<title>Coolwebdeveloper.com</title>

</head>

TEST

</textarea>

</form>

window.onload = function() {

document.formBody.txtarea.focus();

}

</script>

</body>

</html>

Text area gets focus as soon as the iframe is loaded and that makes the screen readers start reading the content within that text area. This was fuly tested with JAWS screen reader and works absolutely fine for accessibility testing.

This is MK signing off for tonight from coolwebdeveloper.com

If you really liked this article you might want to click and subscribe to my Email feed or RSS feed. Thanks.

Share and Enjoy: