Making sure hidden frames are hidden

An issue that arises fairly frequently in regards to web applications is the use of hidden iframe elements used for retrieving data using JavaScript. While they can be easily hidden from visual display using CSS display:none, they are sometimes picked up by screen readers and other AT that extract the DOM code from browsers and re-present it to users in a form that can be navigated using specific key strokes.

For example, the JAWS screen reader provides frame navigation keys: M and Shift+M to cycle forward and back through frame and iframe elements. JAWS also provides a frames dialog (open using insert + F9 that displays a list of frames and iframes on a page identified by their titles. If the title attribute is not present on the frame/iframe then the URL of the source document for the frame is listed.

JAWS farmes list dialog displaying 3 frames: the first with a title of 'empty', the second with an URL as the title and another with a title of 'main'.

Furthermore, when a page loads users of some assistive technology hear information about the content of the page including how many frames are present. So understandably informing users of frames that have no usable content and providng access to them is a sub-optimal outcome.

How to ensure an iframe is hidden

If an iframe contains content that is not intended for users, there are a number of things you can do to ensure it is not available to any users:

  1. Use CSS display:none
  2. Set the height and width attributes to “0”
  3. set the tabindex attribute to “-1”
  4. And just in case a user still manages to encounter the iframe, set the title attribute with text indicating it does not contain anything.

Code example:

CSS:

iframe.hidden
{
display:none
}

HTML:

<iframe src="javascript.html" width="0" height="0" tabindex="-1" title="empty" class="hidden">

The Future – the hidden attribute

HTML5 includes a hidden attribute that can be added to any element:

When specified on an element, it indicates that the element is not yet, or is no longer, relevant. User agents should not render elements that have the hidden attribute specified.

When supported, the use of this attribute will make the hiding of elements and element content, such as an iframe, simpler. Unfortunately at this time no browser supports the hidden attribute, so taking into account legacy software it will be some years before the use of the hidden attribute can be recommended, until that point the recommendations outlined above will have to suffice.

Categories: Development

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

Scott Jehl says:

Great info, thanks. Quick question: would it be beneficial/appropriate to use the @aria-hidden=”true” attribute in this case, at least for browsers and screen readers that support it?

Hi Scott, aria-hidden is not supported by any browsers or AT to my knowledge.

Also from the ARIA implementors guide, the notes for aria-hidden appear to indicate that it is not for hiding or showing as such, but more for indicating a changed state of visibility.

This is not used in mapping to platform accessibility APIs. Instead, use information from the browser core to determine if the element is hidden or not. Advisory: it is incorrect use of WAI-ARIA if an element with aria-hidden (state)=”true” is visible. The aria-hidden property is exposed only so that DOM-based assistive technologies can be informed of visibility changes. However, the browser core will be able to provide the most complete set of all truly hidden nodes.

Thomas Logan says:

Thanks for the article Steve, I found this to be quality content. I’ve encountered this issue from time to time and I think it is good to have a standard technique for how to address it.

Hi Scott

An example use of the aria-hidden attribute would be for a tab widget where certain content is hidden from view (aria-hidden="true") until its respective tab is selected. The currently selected tab would be set with aria-hidden="false". Of course, these values would be swapped in and out dynamically using js/jQuery.

Thanks for the write-up Steve.

Great info, Steve!
I would also suggest that developers consider using ARIA role=presentation as one of the iframe attributes. This will for sure hide the offending frame from screen readers.