Test: Screen Readers and the iframe Element

Last updated: 7 December 2015

Notes

I have always advised putting a title attribute on iframe elements, even ones that hold no useful user content. For those iframes with no useful content, something like title="No content" should suffice. This advice is still valid for older screen readers, but iframe elements behave quite differently on modern platforms.

For example, on iOS iframe elements are nearly always experienced as "seamless" frames. VoiceOver reads the iframe content as if it was part of the containing page without announcing that the frame is present nor anouncing its URL. The title attribute has no effect. However, iframe elements can be hidden from VoiceOver with their content visible (aria-hidden="true"), or completely hidden (display:none; or the HTML5 hidden attribute).

Jaws 16 seems to want to announce the page title of the framed page most of the time, even with a basic implementation. After announcing the presence of the frame, the user then navigates into the iframe content. No title attributes are announced, which is not what I was expecting based on previous experience. Jaws will read an iframe with tabindex="-1" in the same way. Jaws ignores an iframe that has been hidden using display:none; or width="0" height="0". Jaws ignores a visible iframe that has been hidden from assistive technology using aria-hidden="true".

Tests

Test iframe 0: basic iframe

Test iframe 1: with title attribute

Test iframe 2: with aria-label attribute

Test iframe 3: with display:none;

Test iframe 4: with zero width and height

Test iframe 5: with tabindex="-1"

Test iframe 6: with aria-hidden="true"

Test iframe 7: with HTML5 hidden attribute

Test iframe 8: with HTML5 seamless attribute