Interactive H5P presentation template for accessible online learning

With online learning booming in 2020 due to the COVID-19 pandemic, we’d like to make our custom H5P course presentation template available under a Creative Commons licence (CC BY-NC 4.0) for others to reuse.

The course presentation tool by H5P is a great way to create free web-based interactive presentations. Late last year my colleagues and I conducted extensive accessibility testing on it, and posted our findings to this blog. We’d used the tool before, but wanted to create a template that met WCAG 2.1 AA accessibility guidelines. So this year we created a template, tested it, trialled it, and successfully used it to create learning resources in live academic modules.

To download a copy to use on your own site, click ‘reuse’ at the bottom left. We’ve included some instructions and information below. An official beginner’s tutorial to creating a H5P course presentation is available on the H5P website.

H5P course presentation template

About the template

It’s possible to add more exciting elements to the presentation, such as various quiz types, but we’ve only included elements we were satisfied with after accessibility testing. There’s nothing stopping you making your presentation jazzier, but you’ll need to consider providing the content in an alternative format such as a Word document to ensure all users can access it.

When using audio, one filetype is not necessarily enough for all browsers to recognise and play the audio. Use MP3 by default, and convert it to an alternative format as well (e.g. WAV or OGG). This can be done using free audio editing software like Audacity. Also, the template uses the ‘Full’ player, as controls always need to be visible to ensure full keyboard accessibility.

Using the template

There are a few important points to bear in mind:

  • Save your work regularly, as H5P is web-based, and you may be timed out.
  • The menu on the left should be left open.
  • Don’t remove the blue button at the top-right of each slide – it’s there to ensure screen readers recognise slide content and read it in the correct order (as tested with NVDA).
  • To add text from a Word document, copy it into Notepad first – otherwise it’ll cause messy formatting, and underlying messy code might cause confusion for users with screen readers.
  • The ‘image library’ slides include decorative images optimised for use in the presentation, including metadata. You may want to delete the image library slides to make the template smaller. Whether you do or not, remember to include alt text if you add your own images.
  • Keep the default font size and style.

We suggest you follow these steps to create your own presentation:

  1. Make a copy of the template, and rename your copy with the appropriate title.
  2. Choose an image for the title slide from the ‘image library’ slides, paste it into the title slide, and resize it to fit.
  3. Identify the template slides you want to use, and delete the rest – then duplicate any template slides as needed.
  4. Add in your own text.
  5. Add decorative images by copying them from the ‘library’ slides, and resizing them as needed.
  6. Add other images if necessary – these should include alt text and metadata.
  7. Delete the image ‘library’ slides at the beginning.
  8. Add all slide titles into the navigation menu on the left.
  9. Save.