iFrame Titles

iFrames are used to embed content like videos, maps, forms, and chat widgets on a page. If an iframe contains meaningful content, it needs an accessible name so screen reader users know what it is.

Why titles matter

Screen readers may announce an iframe as just “frame.” With a title, users hear something like “frame, Customer support chat,” which helps them:

• understand what the embed is for,
• move through the page faster (especially with multiple iframes),
• know when an iframe includes controls they can use.

What makes a good title

A good iframe title is:

• Specific (“Store locator map”)
• Short
• Helpful in context (add details when needed)
• Unique (when there’s more than one)

Avoid vague titles like “iframe,” “widget,” or “embedded content.”

Techniques

There are several techniques available for adding a title to an iFrame

Add a title (recommended default)

The easiest and most reliable way is to add a title.

<iframe src="https://example.com/newsletter-signup" title="Newsletter signup form" >
  </iframe>

If you have multiple iframes, make titles unique

<iframe src="..." title="Product demo video: Model A"></iframe>
  <iframe src="..." title="Product demo video: Model B">
</iframe>

ARIA options

While using title is usually preferred, use aria-labelledby if there’s visible text you want to reuse such as a nearby heading:

<h2 id="chat-heading">Customer support chat</h2>
<iframe src="..." aria-labelledby="chat-heading">
</iframe>

Use aria-label if there’s no visible label:

<iframe src="..." aria-label="Customer support chat">
</iframe>