Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.
What You Need to Know
A frame's title should say what the embedded page contains, such as Course registration form. Without a useful title, someone navigating by screen reader may have trouble deciding whether to enter the frame.
In this example: label an embedded calendar iframe.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<h1>Weather report</h1>
<iframe src="/embeds/weather.html" title="Current weather details" width="600" height="300"></iframe>
<p>Weather details are also summarized in the surrounding article.</p>Let’s Read the Code
- <h1>: A top-level heading explains what the page is about.
- <iframe>: An iframe embeds a separate document with its own URL and security context.
- src: Src identifies a resource path for images, frames, or media.
- width: Width gives a preferred or intrinsic media width, depending on the element.
What the example shows: The frame title communicates what the embedded document is for without forcing users to open it first.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Remember the boundary. Embedded content may be a separate document, sometimes provided by another company. Give it a readable title or alternative, and check what permissions and information its request may expose.
Your Turn
Replace the embedded page with a video transcript and update the title accordingly.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- A filename such as widget.html is not a meaningful title.
Key Takeaways
- A frame's title should say what the embedded page contains, such as Course registration form.
- <h1>: A top-level heading explains what the page is about.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.