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.
Remember to add a
title attribute if you’re embedding your video using an
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
Here’s an example of a
title attribute that’s been added to the
<iframe>, informing us that this is a YouTube video about human rights which is filmed entirely in sign language:
title attribute makes a video more accessible
By giving the
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
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
Modify the HTML
<iframe> code to include an appropriate
title attribute that has a short meaningful description.
In the example above, the opening
<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
In the code, search for "<iframe>", and where there’s an
<iframe> that is loading a video, check that it has a proper
Read more about adding
title attributes for videos published in an