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]] and [[WCAG-4.1.2]]
• Identify frames not intended for users in their label.
• Use relative units to size the iframe.
• Ensure users can scroll the iframe.

Example

<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>

<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.

Related Links

• MDN — <iframe>: The Inline Frame element
• HTML — The iframe element