Accessible iframes

iframe Accessibility

Screen readers navigate iframes by reading their title attribute. A missing or vague title ("iframe") leaves screen reader users without context.

Make the embedded content itself accessible — the iframe container alone cannot compensate for inaccessible inner content.

Example

<!-- Clear, descriptive title -->
<iframe
  src="contact-form.html"
  title="Contact us form"
></iframe>

<!-- Video embed -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Tutorial: How to use CSS Grid"
  allowfullscreen
></iframe>

HTML

Full Editor

Pro Tip

The title attribute describes the iframe's purpose — think of it like an alt attribute for the entire embedded document.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned