What iframe embeds are

An iframe is a Hypertext Markup Language (HTML) element. They are used to embed content and media within a webpage.

We use third-party services, like Vimeo and Flickr, to host content like videos and image galleries. These services provide their own embed codes, which vary in format and can be added to Typecase components.

Title attribute

It is best practice for an iframe embed code to contain a title attribute. This is a section of text that is readable by screen reading software and helps blind users or users with low vision to identify the contents of the iframe.

Example iframe embed code:

< iframe title="Security services at the University of Bath" src="https://player.vimeo.com/video/438141811" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>< /iframe>

The title attribute in this example is: ‘title="Security services at the University of Bath"’.

Services like, Vimeo, YouTube and Flickr include a title attribute by default, while SoundCloud and OpenStreetMap do not.

However, services that include a title attribute by default sometimes include generic information that fails to accurately convey what the iframe contains, such as ‘Video player’, for example.

Creating accessible content

If you are using an iframe embed code on Typecase, it’s your responsibility to make sure it contains an accessible title attribute.

As a public sector body, we're legally required to make the content on our website as accessible as possible. The government checks our content to make sure it complies with the internationally recognised guidelines from the World Wide Web Consortium (W3C).

Find out more about accessibility or contact beta-content@bath.ac.uk if you have any questions.

Formatting and adding accessible title attributes

Formatting title attributes

To format an accessible title attribute, write a short, descriptive title that conveys the specific theme of the content. For example:

• title=“Highlights of Freshers’ Week 2023”
  
• title=“Research with Impact podcast, episode 5, We need to talk about AI”
  
• title=“Summer graduation gallery, 18 July 2023”
  

Adding and correcting a title attribute

1. Copy the embed code generated by your third-party multimedia provider.
   
2. Paste the embed code into Typecase. You may find it easier to paste your embed code into a text editor, like Windows Notepad or Mac TextEdit, first to examine and edit the code before you add it to Typecase.
   
3. Check whether there is a title attribute in the embed code:
   
   • if there is a title attribute - make sure the wording within the quotation marks is not generic and meets our guidelines
     
   • if there isn't a title attribute - add your title attribute after 'iframe' at the beginning of the embed code
4. If you haven’t added the embed code to Typecase already, copy and paste the updated code into the relevant field in Typecase.