Title attribute, if video published in an <iframe>
The HTML title attribute lets people using a screen reader know that a video is present and what it’s about, so that they can play it or skip past it if they want to.
See the latest guidance on title
attributes for videos published in an <iframe>
This page is currently out of date — for the latest guidance on this topic, see Title attribute, if video published in an <iframe>
— NZ Government.
Adding a title
attribute
Remember to add a title
attribute if you’re embedding your video using an <iframe>
.
If you’re publishing a video from YouTube, Vimeo or another video-sharing platform, you’re likely to be embedding the video in your web page using an HTML <iframe>
element.
How a title
attribute makes a video more accessible
By giving the <iframe>
a title
attribute that has a short, meaningful description, people using assistive technologies like screen readers can identify the content or purpose of the <iframe>
. In the case of a video embedded in an <iframe>
, they will understand that the content in the <iframe>
is a video and what the video is about. This allows them to interact with or skip past the video as they please.
Meeting the Web Accessibility Standard
WCAG’s Success Criterion 4.1.2 Name, Role, Value requires that every user interface component have a name that assistive technologies can use to refer to it. When you add a title
attribute to a video <iframe>
, you are providing that name.
There is some disagreement among accessibility experts about whether an <iframe>
meets the definition of a user interface component — and therefore if Success Criterion 4.1.2 applies to <iframe>
elements.
However, a descriptive title
attribute on a video <iframe>
helps screen reader users and does no harm, so it remains recommended practice.
How to create a title
attribute for a video <iframe>
Modify the HTML <iframe>
code to include an appropriate title
attribute that has a short meaningful description.
In the example above, the opening <iframe>
has this
title
attribute:
<iframe
title="YouTube video: An explanation of what human rights are — presented in New Zealand Sign Language" width="300" height="150">
Testing that your video has a title
attribute
In the code, search for <iframe>
, and where there’s an <iframe>
that is loading a video, check that it has a proper title
attribute.
More information
Read more about adding title
attributes for videos published in an <iframe>
.
H64: Using the title attribute of the frame and iframe elements - W3C
Utility links and page information
Last updated