JAWS not announcing loaded iFrame content?
Asked Answered
A

2

6

I am working on a web application which uses iFrames (please don't ask me to use something else, not my decision). There are two frames, a navigation frame, and a content frame (top down).

The navigation frame always stays the same. When a user clicks a link, causing the content within the content frame to change, JAWS does nothing. What I want JAWS to do, is announce the content (at least the heading) of the new page.

I've looked up WAI-ARIA tags and have been trying various JavaScript tricks to command focus onto the elements. The only thing that has kind of worked is doing the following

<iframe id="contF" aria-atomic="true" aria-live="assertive" frameborder="0" name="content" title="${ca.title}" src="${ca.src}"></iframe>

This will cause JAWS to announce the contents of the frame when it is FIRST loaded (so the link has never been clicked before). If it is a "visited link", it will not announce the contents of the frame at all.

Auxiliaries answered 10/9, 2012 at 23:17 Comment(1)
I'm afraid VoiceOver and ChromeVox have the same issueSodomite
A
2

I know this is a very old post, but I'll post my solution for the people that have the same problem. Put a description div inside all pages that will be loaded on the iframe:

<div id="ac_title" style="display:inline-block;position:absolute;top:0;right:0;height:1px;width:1px">Page ZZZ loaded.</div>

And the following code inside index.html:

window.frames["content"].onload = function() {
    var a = this.contentDocument.getElementById("ac_title");
    if (a) {
        a.setAttribute("role", "alert");
    }
};
Amphitropous answered 9/8, 2019 at 11:36 Comment(0)
C
0

I know you asked not to ask to change anything, but why would you go with two iframes? I haven't dealt with this in years so I am very fuzzy. I want to say that you can link normal frames together, but not iframes.

It may work if you add target="content" to the various links within the navigation frame.

The atomic attribute does not work because of the nature of both that attribute and iframe. The atomic attribute watches for DOM changes and fires when that changes. So to your

<iframe id="contF" aria-atomic="true" aria-live="assertive" frameborder="0" 
name="content" title="${ca.title}" src="${ca.src}"></iframe>

is doing nothing, because the DOM of the page this iframe is on, is not changing.

Cairn answered 19/11, 2012 at 14:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.