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
ortitle
). [[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
. - Set scrolling to
auto
.
Example
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 theiframe
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 user 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 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 CSSdisplay
property tonone
, and height and width to 0. To ensure that users cannot tab to the element, set thetabindex
attribute to-1
.
Related Links
- MDN — <iframe>: The Inline Frame element
- HTML — The
iframe
element