Embedding iFrames
Many of our users currently embed videos in their web page content from sources such as Panopto, Youtube and Vimeo. Panopto uses an aria-label attribute and Youtube uses a title attribute. However, the embed code provided by some of these platforms does not automatically include a title or aria-label attribute or they include a generic, auto-generated title which does not meet accessibility standards. 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 or aria-label attribute. The examples below show how to structure the aria-label and 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 Panopto
<iframe height="405" width="720" allowfullscreen allow="autoplay" aria-label="Student Tour of Queen's Campus" src="https://qub.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=e6fe1340-3b79-4b4f-bab0-b0fc0107feef&autoplay=false&offerviewer=true&showtitle=true&showbrand=true&captions=false&interactivity=all" style="border: 1px solid #464646;"></iframe>
Example Two: iframe embed code from Youtube
<iframe title="Student Tour of Queen's 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
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>