Inline Frames

Inline frames generally integrate well with assistive technologies, but the following accessibility considerations should always be adhered to when using them:

Each inline frame should include an explanatory title that clearly indicates the purpose of the embedded content (in a title attribute on the iframe element).
When setting the height and width of the iframe, a relative unit such as percentage or ems should be used to facilitate resizing.
Scrolling should be set to auto so that if the reader resizes the content in the frame it can still be accessed if it becomes bigger than the available space.
The iframe element should provide embedded fallback content for reading systems that do not support inline frames (e.g., a direct link to the content file).
If the frame does not contain content for the reader, indicate as much in the title, set its CSS display property to none, and height and width to 0. To ensure that readers cannot tab to the element, set the tabindex attribute to -1.

Example

Example 1 — An accessible iframe

<iframe
        href="quiz01.xhtml"
        title="Quiz 1"
        class="quiz">
   Your reading system does not support
   inline frames. Please follow <a 
   href="quiz01.xhtml">this link</a> 
   to open the associated content document.
</iframe>

Example 2 — An invisible iframe

<iframe
        href="script.xhtml"
        title="empty"
        tabindex="-1"
        height="0"
        width="0"
        class="hidden">
</iframe>

Compliance References and Standards

HTML5 — The iframe element
WCAG 2.0 — H64: Using the title attribute of the frame and iframe elements

Additional Resources

Making sure hidden frames are hidden

Frequently Asked Questions

Should I set role="presentation" when indicating an iframe does not contain user content?: No, it is not valid to use the presentation role on iframe elements. The presentation role only removes the element it is on from the accessibility tree, not its descendant content, so would not have the desired effect if used.