Make H5P More Accessible

H5P’s interactive learning activities are a great way for instructors to apply Universal Design for Learning principles, by offering multiple ways for students to engage with learning, to practice, and to demonstrate their knowledge. And most H5P content types are designed to be accessible for all learners.

H5P content types like “accordion” or “class presentation” can help instructors chunk content and reduce cognitive load. Instructors can also intersperse low-stakes or lightweight self-assessments into content presentations, so that students can check and gauge their comprehension and build confidence before proceeding.

As you design activities, review the following tips to boost the accessibility of your H5P content.

When creating or updating content and activities in H5P, be sure your content follows good accessibility practices, like those below. For more details, see the 7 Pillars of Digital Accessibility.

• Headings: Headings help readers navigate the structure of your content. Use the Paragraph Format menu in the content editor to set appropriate heading levels.
• Lists: Bulleted and numbered list styles also provide important structure cues for readers. Use the bulleted or numbered list styles in the content editor to structure lists correctly.
• Descriptive Links: To make a link in the content editor, highlight the text that describes the target of the link, click the link control in the editor toolbar, and then paste the target URL (web address) in the URL field.
• Color: Use a color contrast checker like WebAIM’s Contrast Checker to ensure that foreground text or visuals have adequate contrast against the background. If you use color to indicate something meaningful (categories, requirements, etc.), make sure those are also accompanied by a text, symbol, icon or shape indicator.
• Alt text for images: When adding an image, enter a concise description in the required “Alternative text” field. When using the Collage element, select “i" (Image settings) and enter alternative text. Keep in mind that there is limited space to describe all images in the collage.

Will all your students be able to engage with your H5P activities?

Imagine one of your students has limited vision, limited hearing, a cognitive disability, or can’t use a mouse or touchscreen. Are they able to fully and independently engage with your H5P activities?

H5P Group maintains a complete list of content types that indicates whether H5P Group considers each of those content types accessible or not. Generally, modules that H5P Group has identified as problematic are disabled in the UVACanvas H5P environment, so you generally won’t see those content types available to choose from.

If you’re not sure if all students would be able to interact effectively with a given activity, here are some options to consider:

• Pair the activity with an alternate activity to give your students a choice. Make sure both options give students equivalent opportunity to meet the objectives and demonstrate their learning.
• If your class setup allows, pair or group students so they complete the activity in pairs or teams. If you do this, don’t single out just students you know have disabilities; apply the same approach to all.

Are you using video in your H5P activity?

First, check to make sure the video includes accurate closed captions. If it doesn’t, you can add them by preparing a WebVTT file with the caption content.

If you need to add closed captions to your Video content (i.e. in a Course Presentation, Column, or Interactive Book), follow these steps:

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.

If you need to add closed captions to an Interactive Video with H5P, follow these steps:

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

Are you using audio media in your H5P activity?

When using the Audio element, use an adjacent link or accordion to link to a text transcript of the audio.

Course presentation content type

If you use this H5P content type, apply the principles of good design that you’d use for presentation slides. Slide text should be concise, written in plain language, and use clear fonts and sufficient size. Other important accessibility tips:

• Content will be read by screen readers in the order it is added to the slide. Take care when editing to preserve proper reading order; this may mean you need to delete and re-add content when editing.
• Each slide should start with a slide title, entered as a heading level 2.
• Do not set slides to “auto-play” but instead allow students to advance them.

Multilingual content, i.e. in foreign language instruction

When text is in multiple languages, it’s important to identify those languages in the document’s underlying code, so that speech-to-text tools can pronounce words properly.

To make it easier for content authors and editors to specify languages of text passages, H5P.com offers an option to enable language switching in the text editor. To do this, you must make a one-time change in your account settings in H5P, as follows:

1. Log into H5P
2. In the top toolbar, click on your name
3. From the dropdown menu, select “My Account”
4. Under “Edit My Account,” scroll down to the section under the heading “Rich text editor options” and enable the checkbox labeled “Language”
5. Scroll to the bottom of the page and click “Save”

Once you have enabled this option, if you open any area for text editing in H5P, you will see a new language-switching menu in the toolbar. You can select a text passage in the editor and then update the language-switching menu to identify the language of the selected passage.