Screen reader users rely on frame titles to understand embedded content. Without titles, iframes become mysterious black boxes that users must enter to understand.

What's Happening

Your page has <iframe> or <frame> elements without a title attribute. Screen readers announce frames as navigation landmarks, but without titles, users hear only "frame" with no indication of what's inside. They must enter the frame, explore it, and exit to continue, which wastes time and causes confusion.

Diagnose

1. Open DevTools (F12 or Cmd+Shift+I)
2. Run this in the Console to find frames without titles:

document.querySelectorAll('iframe, frame').forEach((el) => {
  if (!el.title || el.title.trim() === '') {
    console.log('Missing title:', el)
  }
})

3. Use a screen reader (VoiceOver, NVDA) to navigate to the frame and hear how it's announced

Fix

1. Add Descriptive Title Attributes

Give each frame a title describing its purpose:

<!-- Before -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

<!-- After -->
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Product demonstration video">
</iframe>

2. Examples for Common Embed Types

<!-- Google Maps -->
<iframe
  src="https://www.google.com/maps/embed?..."
  title="Map showing our office location in San Francisco">
</iframe>

<!-- Social media embeds -->
<iframe
  src="https://platform.twitter.com/embed/..."
  title="Twitter post from @company about product launch">
</iframe>

<!-- Third-party widgets -->
<iframe
  src="https://calendly.com/embed/..."
  title="Schedule a meeting with our sales team">
</iframe>

<!-- Advertising (if unavoidable) -->
<iframe
  src="https://ads.example.com/..."
  title="Advertisement">
</iframe>

3. Hide Decorative or Technical Iframes

For iframes that provide no user content (tracking pixels, technical embeds):

<iframe
  src="https://tracking.example.com/pixel"
  title=""
  aria-hidden="true"
  style="display: none">
</iframe>

Note: Empty title with aria-hidden="true" hides the frame from assistive technology entirely.

Framework Examples

<template>
  <iframe
    :src="videoUrl"
    title="Customer testimonial video from John Smith"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
  />
</template>

For React, ensure title is a required prop or add ESLint rules:

// Good pattern: require title prop
function VideoEmbed({ src, title }) {
  if (!title) {
    console.warn('VideoEmbed requires a title for accessibility')
  }

  return (
    <iframe
      src={src}
      title={title}
      loading="lazy"
    />
  )
}

Verify the Fix

1. Run Lighthouse again and check the frame-title audit passes
2. Use VoiceOver (Mac) or NVDA (Windows) to navigate to the iframe
3. Confirm the screen reader announces the title before entering the frame
4. Verify the title accurately describes the content

Common Mistakes

• Using generic titles like "iframe" or "embedded content" — Be specific. "YouTube video" is better, but "Product demo showing checkout flow" is best.
• Copying the URL as the title — title="https://youtube.com/..." tells users nothing. Describe what they'll find.
• Forgetting dynamically inserted iframes — Social embed scripts and video players often inject iframes without titles. Check your rendered HTML, not just source code.
• Third-party embeds without title support — Some embed codes don't include titles. Manually add the title attribute after the script injects the iframe, or wrap in a labeled container.

Related Issues

Frame title issues often appear alongside:

• Image Alt — Both require descriptive alternative text for embedded content
• Link Name — Iframes containing links need proper link names too
• Button Name — Interactive elements inside iframes need accessible names

Test Your Entire Site

Iframes often appear on specific page types like blog posts with videos or contact pages with maps. Unlighthouse crawls your entire site running Lighthouse on each page, catching frame title issues wherever they appear so you can fix embed patterns at the source.

Related

• All Accessibility Issues
• Accessibility Overview