H5P

H5P (HTML5 Package) is an open source tool to create interactive content. As with any content, follow the basic accessibility essentials.

H5P has many different content types and this chapter will focus on general accessibility features and a few special cases.

On this page:

• Best Practices
• Text Formatting
• Alternative Text
• Closed Captions
• Specific Elements
• Further Reading

General Accessibility Best Practices

Provide all H5P elements with unique, descriptive titles.

Check colour contrast manually using ColorZilla browser extension and the WebAIM Contrast Checker. Read more about colour contrast.

Write in plain language.

Use accessible hyperlinks that describe the link destination. To add hyperlinks in H5P text content:

1. Highlight text to be linked
2. Click the Link tool or press Control (Command on macOS) and k
   
3. Paste URL in URL field and select Ok.
   

Text Formatting

Highlight font and use Paragraph Format menu add headings.

Alternative Text

When adding an Image, enter a description in the Alternative text field. Or, check Decorative only for decorative images.

When using the Collage element, select i (Image settings) and enter alternative text.

The Collage element does not support marking images as decorative. But, given the visual nature of the Collage element, all Collage images should have alternative text.

Learn more about alternative text.

Closed Captions

To add closed captions to a Video (included in Interactive Book, Column, or Course Presentation):

1. Expand the Accessibility accordion.
2. Type the language of the captions in Track label.
3. Change Type to Captions.
4. Click Add and upload a WebVTT file.

To add captions to an Interactive Video:

1. Expand the Text tracks accordion.
2. Type language of captions in Track label.
3. Expand Subtitles accordion.
4. Select Add to upload a WebVTT file.

Use happyscribe caption converter to convert .SRT caption type to .VTT file.

Learn more about closed captions.

Specific Element Considerations

There are some H5P elements that require special attention when used:

Course Presentation

Try to limit the number of elements presented on each slide of a course presentation. Content is read by assistive technology in the order it was added to the slide, starting with the first item added. Be aware when adding multiple blocks of text, images, or other elements to a slide as it is easy to confuse the reading order.

Audio Element

If using the Audio element, supply a text transcript in an adjacent accordion element or link to a text transcript of the audio.