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 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' 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