External Resources (<iframe>, <embed>, <object>)

When To Use

  • Use <iframe> to embed other HTML pages on the webpage. 3
  • Use <embed> and <object> to embed external content like PDFs on the webpage. 1

Rules

  • External resources like PDFs should be linked to on a separate page instead of embedding them on a page whenever possible. 1
  • To ensure that individuals using assistive technology, such as a screen reader, can comprehend the content within an <embed> or <object> element, it is recommended to utilize the title attribute to provide a descriptive label. 2 3
  • While a descriptive title attribute value is not mandatory for iframe elements, it is recommended to include one if the inline frame presents visually distinct content, such as an advertisement or video player, as a whole. Don‘t use the aria-label attribute, since it is not supported for this element. 4
  • Upon encountering an <iframe> element, the content is treated as if it were part of the parent page and is read in the order of markup. 4
  • To ensure visibility and accessibility for users who enlarge fonts and other page elements, it is not advisable to disable scrolling for iframes (or frames) using scrolling="no". 4
  • Whenever feasible, it is advisable to create iframes with relative sizes so that the iframe element can adjust proportionally as the page and its contents are resized. 4

Sources 

  1. MDN: learn other embedding technologies by Mozilla contributors is licensed under CC-BY-SA 2.5
  2. MDN: <embed>: The Embed External Content element by Mozilla contributors is licensed under CC-BY-SA 2.5
  3. MDN: <iframe>: The Inline Frame element by Mozilla contributors is licensed under CC-BY-SA 2.5
  4. WebAIM: Creating Accessible Frames and Iframes © WebAIM
Created at: 19.04.2023, Last updated at: 11.06.2023