Skip to Content

Accessible Publishing Knowledge Base

Category: HTML

Inline Frames

Summary

Ensure that inline frames are uniquely titled so that users can decide whether they want to read or interact with the contents, and that frame content remains consumable after resizing or zooming.

Techniques

  • Ensure that the frame has a meaningful label (aria-label, aria-labelledby or title). [WCAG 2.4.1 - A] and [WCAG 4.1.2 - A]
  • Identify frames not intended for users in their label.
  • Use relative units to size the iframe.
  • Ensure users can scroll the iframe.

Example

Example 1 — A basic iframe

The iframe identifies that it contains a quiz in its title attribute. It includes fallback content to reach the file for reading systems that do not support frames.

<iframe
      href="quiz01.xhtml"
      title="Quiz 1"
      class="quiz">
   Your user agent does not support
   inline frames. Please follow <a 
   href="quiz01.xhtml">this link</a> 
   to open Quiz 1.
</iframe>
Example 2 — An invisible iframe

The iframe contains code necessary for the page, so it is visually hidden and a label also identifies that it contains no content.

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

Explanation

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 not be disabled so that users can access content even if they resize it such that it no longer fits within the visible space of the iframe. For example, do not set the CSS overflow properties on the iframe to clip or hidden.
  • The iframe element should provide embedded fallback content for user agents that do not support inline frames (e.g., a direct link to the content file).
  • If the frame does not contain content for the user, indicate as much in the title, set its CSS display property to none, and height and width to 0. To ensure that users cannot tab to the element, set the tabindex attribute to -1.

Applies To

EPUB 3 EPUB 2 Audiobooks
Yes Yes Partial *

* Applies to the table of contents and any supplementary HTML resources.

Related Links

Back to Top ↑