Skip to main content

Embedding iFrames

Relates to Siteimprove Error - 4.1.2 Name, Role, Value

  • iFrame is missing a title.

Many of our users currently embed videos in their web page content from sources such as Mediasite, Youtube and Vimeo.  Unfortunately, the embed code provided by some of these platforms does not automatically include a title attribute which is important for accessibility.  When an iframe is given a meaningful title, screen reader users can pull up a list of frames and identify the content or purpose of the iframe based on its title. Without a meaningful name, a screen reader user may just hear "frame", the file name, path of the iframe, or an unhelpful name like "javascript".

When embedding a video using the content type 'DTP - Video Embed' or 'DTP - Video with Text' and after you have copied and pasted the required embed code into the content type, please add the required title attribute.  The examples below show how to structure the title attribute and where it should be placed within the iframe embed code.  Please ensure the title of the iframe is meaningful.  

Example One: iframe embed code from Mediasite 

<iframe title="Student Tour of Campus" width="450" height="300" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" src="https://mediasite.qub.ac.uk/Mediasite/Play/0a1e75a1822943cf85d2f68fe173d5041d" allowfullscreen msallowfullscreen allow="fullscreen"></iframe>

Example Two: iframe embed code from Youtube

<iframe title="Student Tour of Campus" width="560" height="315" src="https://www.youtube.com/embed/LtnMwNzsSpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

iFrame is Missing a Title

Relates to Siteimprove Error

  • Do these iFrames contain the same content.

When Youtube generates the embed code for a video, it now automatically adds the same generic title tag for each video, as follows: title="YouTube video player" 

However, this does not have descriptive value to those using assistive technologies and will be listed in your Siteimprove Accessibility Report as an error. 

To fix this, after you have copied and pasted the required YouTube embed code into the content type, simply replace the generic title text inside the quotation marks with meaningful title text. The examples below highlight where to replace the title attribute within the YouTube iframe embed code:

Example One: iframe embed code from Youtube with auto-added title

<iframe title="YouTube video player" width="560" height="315" src="https://www.youtube.com/embed/LtnMwNzsSpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Example Two: iframe embed code from Youtube with replaced meaningful title

<iframe title="Student Tour of Campus" width="560" height="315" src="https://www.youtube.com/embed/LtnMwNzsSpM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>