In this Article
What are iframes and frames?
What are iframes and frames?
iframes and frames are often utilized as a way to embed content within a page from another source. iframes and frames are often useful means for embedding maps and video hosted by a 3rd party, like YouTube.
Why should frames have titles?
It is important that web editors provide a title for iframes and frames so a web visitor knows whether they want to dive into this content. Screen reader users can pull up a list of titles for all frames on a page. Giving these users a list of descriptive and unique titles can help them quickly scan the iframe titles and choose the content they want.
Frame Title Best Practices
Be sure to remove placeholder title text, such as
untitled page.The title attribute should typically be the same as the title element from the item being embedded. This is often very similar to the heading 1 provided on the embedded content. It is okay if these are not exactly the same.
Each frame title attribute should be unique, even across pages.
An Example
An example of this could be providing maps for directions to your location. For instance, if we were embedding two sets of directions on our website for getting to our location, it is important to include two different descriptive titles on these embeds. If one was for driving from the airport and the other was for walking from the train station, we would not want to just provide the title "directions" for both of these maps even though they are both indeed directions.
We should title one "Driving directions from the airport provided via Google maps" and the other "Walking directions from the Lenox MARTA station provided via Google maps".
<iframe title="Driving directions from the airport provided via Google maps" src="https://www.google.com/maps/embed?pb=!2x28" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe title="Walking directions from the Lenox MARTA station provided via Google maps" src="https://www.google.com/maps/embed?pb=!1m18" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Learn More with WCAG
DubBot Flags:
Frames must have an accessible name,
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!