A Common Accessibility Issue: iFrames

One of the common accessibility errors we see in our reporting tool, Level Access, is a lack of accessible names on iFrames.

What is an iFrame?

An inline frame (iframe) is an HTML element that loads another HTML page within the document. It essentially embeds a webpage inside another webpage. They are commonly used for showing advertisements, videos, forms, social media posts, and other interactive content from services outside of Miami’s websites.

How do we use iFrames?

Miami most commonly uses iFrames to display YouTube videos within a page so the visitor can watch the video right there without leaving your site.

Miami website editors can add videos in two ways:

Cascade pages: create a video widget or paste the embed code directly into the HTML of a WYSIWYG row.
WordPress: add a video block to your page or post.

How do I give an iFrame an accessible name?

All iFrames are required to have a title attribute that provides a description of the purpose and content of what is in the iFrame.

Many embed codes provided by third parties, such as social media sites, do not include a title attribute. YouTube has recently started including a title attribute, but the text is very generic and doesn’t describe the contents of the video, which doesn’t meet our guidelines.

iFrame Example

Here is an example of the typical HTML for an iframe of a YouTube video:

You can improve this code by updating the text inside the quotes “” of the title attribute. You can also adjust the width and height values to make the video responsive and work well across a variety of devices. The updated HTML will look something like this: