Guide to accessible content

Iframes

Iframes are used to display content from one web page inside another web page, most often used for embedding video, advertisements and interactive content.

Give each iframe a unique label

  • This lets screen reader users know what content has been embedded, before they navigate into the iframe.
  • If there are multiple unlabelled iframes on a page, it’s hard for people using screen readers to distinguish between them.

How to label an iframe

Use the title attribute to provide an accessible label for iframes. Here is an example of the HTML code for an iframe embedding a Vimeo video player:

<iframe width="640" height="360" src="https://player.vimeo.com/video/786057809" title="Accessibility takeaways from the W3C redesign" allowfullscreen=""></iframe>

When copying and pasting an embed code from any third-party source, check that it includes the title attribute and that it has a unique and descriptive value. Generic titles such as “YouTube video player” are not helpful for screen reader users, especially if there is more than one on a page.