Be Sure to Provide Titles for Iframes

Iframes usually do not cause accessibility issues for users as long as the iframe has a title and the structure of a document within the iframe make sense within the container document. When an iframe is given a meaningful title, screen reader users can pull up a list of frames and identify the content or purpose of the iframe based on its title. Without a meaningful name, a screen reader user may just hear "frame", the file name, path of the iframe, or an unhelpful name like "javascript".

Always Provide a Title for an Iframe

For iframes that have meaningful content, provide a title using the title attribute.

<iframe title="Campus Tour" src="campustourvideo.html"></iframe>

For iframes that contain non-readable content, like JavaScript, provide a title to pass automated tests, but be sure to hide the content altogether from screen reader users using aria-hidden="true".

<iframe title="Intentionally blank" src="noreadablecontent.com" aria-hidden="true"></iframe>

Make Sure Documents Within Iframes Have Titles, Too

Some screen readers may read a document's title in the iframe instead of the title attribute on the <iframe> tag, if the document's title is available. A best practice would be to use both a title attribute and the <title> tag that matches each other to make sure the same title is read across various screen readers.