- \r\n \t
- Best Practices<\/a><\/li>\r\n \t
- Text Formatting<\/a><\/li>\r\n \t
- Alternative Text<\/a><\/li>\r\n \t
- Closed Captions<\/a><\/li>\r\n \t
- Specific Elements<\/a><\/li>\r\n \t
- Further Reading<\/a><\/li>\r\n<\/ul>\r\n
<\/a>General Accessibility Best Practices<\/h2>\r\nProvide all H5P elements with unique, descriptive titles.\r\n\r\n
![\"Screenshot](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-Title.png\")
\r\nCheck colour contrast manually using ColorZilla<\/a> browser extension and the WebAIM Contrast Checker.<\/a> Read more about colour contrast<\/a>.\r\n\r\nWrite in plain language<\/a>.\r\n\r\nUse accessible hyperlinks<\/a> that describe the link destination. To add hyperlinks in H5P text content:\r\n- \r\n \t
- Highlight text to be linked<\/li>\r\n \t
- Click the Link<\/strong> tool or press Control <\/strong>(Command<\/strong> on macOS) and k\r\n<\/strong>
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-Link.png\")
<\/li>\r\n \t- Paste URL in URL<\/strong> field and select\u00a0Ok.\r\n<\/strong>
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-Link2.png\")
<\/li>\r\n<\/ol>\r\n<\/a>Text Formatting<\/h2>\r\nHighlight font and use Paragraph Format<\/strong> menu add headings<\/a>.\r\n\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-TextStyle.png\")
\r\n<\/a>Alternative Text<\/h2>\r\nWhen adding an Image, enter a description in the Alternative text<\/strong> field. Or, check\u00a0Decorative only<\/strong> for decorative images.\r\n\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-AltText-Image.png\")
\r\nWhen using the\u00a0Collage\u00a0element, select\u00a0i\u00a0<\/strong>(Image settings<\/strong>) and enter alternative text.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-AltText-Collage.png\")
\r\nThe 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.\r\n\r\nLearn more about alternative text<\/a>.\r\n<\/a>Closed Captions<\/h2>\r\nTo add closed captions to a Video (included in Interactive Book, Column, or Course Presentation):\r\n
- \r\n \t
- Expand the Accessibility<\/strong> accordion.<\/li>\r\n \t
- Type the language of the captions in Track label.<\/strong><\/li>\r\n \t
- Change Type<\/strong> to\u00a0Captions.<\/strong><\/li>\r\n \t
- Click\u00a0Add<\/strong> and upload a WebVTT file.<\/li>\r\n<\/ol>\r\nTo add captions to an Interactive Video<\/a>:\r\n
- \r\n \t
- Expand the\u00a0Text tracks<\/strong> accordion.<\/li>\r\n \t
- Type language of captions in\u00a0Track label.<\/strong><\/li>\r\n \t
- Expand\u00a0Subtitles<\/strong> accordion.<\/li>\r\n \t
- Select\u00a0Add<\/strong> to upload a WebVTT file.<\/li>\r\n<\/ol>\r\nUse happyscribe caption converter<\/a> to convert .SRT caption type to .VTT file.\r\n\r\nLearn more about closed captions<\/a>.\r\n\r\nTo use other platforms to generate captions:\r\n
\r\n[h5p id=\"155\"]<\/code><\/div>\r\n<\/div>\r\n<\/a>Specific Element Considerations<\/h2>\r\nThere are some H5P types that require special attention when used:\r\n
Page and Interactive Book<\/h3>\r\n
![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-Row-1.png\")
The Page (formerly known as Column) and Interactive Book types have a content type called Row. Rows allow for multiple content types (images, text, quizzes, etc.) to be grouped and aligned horizontally. This helps with organization and reading order. Page and Interactive Books allow creators to add as many Rows as desired. A row can hold 1-4 columns. Column width can be set manually as a percent of 100. If not set, or in event of discrepancy, H5P will divide columns 50-50, 33-33-33, or 25-25-25-25 depending on number of columns.\r\n\r\n![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P-Row2.png\")
\r\n<\/a>Course Presentation<\/h3>\r\nTry to limit the number of elements presented on each slide of a course presentation<\/a>. 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.\r\n
<\/a>Audio Element<\/h3>\r\nIf using the Audio element<\/a>, supply a text transcript in an adjacent accordion element or link to a text transcript of the audio.\r\n\r\n
\r\n\r\n\r\n <\/a>Further Reading<\/p>\r\n\r\n<\/header>\r\n
\r\n\r\nThe Academic Senate for California Community Colleges completed extensive accessibility reviews of 50 H5P types<\/a>.\r\n\r\nH5P notes content type accessibility<\/a> with notes on issues and planned improvements.\r\n\r\nH5P has recommended content types<\/a> based on accessibility and current support.\r\n\r\n<\/div>\r\n<\/div>","rendered":"![\"\"](\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/wp-content\/uploads\/sites\/1155\/2023\/01\/H5P_Logo-300x150.png\")
<\/p>\nH5P (HTML5 Package) is an open source tool to create interactive content. As with any content, follow the basic accessibility essentials<\/a>.<\/p>\n
H5P has many different content types and this chapter will focus on general accessibility features and a few special cases.<\/p>\n
On this page:<\/strong><\/p>\n
- \n
- Best Practices<\/a><\/li>\n
- Text Formatting<\/a><\/li>\n
- Alternative Text<\/a><\/li>\n
- Closed Captions<\/a><\/li>\n
- Specific Elements<\/a><\/li>\n
- Further Reading<\/a><\/li>\n<\/ul>\n
<\/a>General Accessibility Best Practices<\/h2>\n
Provide all H5P elements with unique, descriptive titles.<\/p>\n
\nCheck colour contrast manually using ColorZilla<\/a> browser extension and the WebAIM Contrast Checker.<\/a> Read more about colour contrast<\/a>.<\/p>\nWrite in plain language<\/a>.<\/p>\n
Use accessible hyperlinks<\/a> that describe the link destination. To add hyperlinks in H5P text content:<\/p>\n
- \n
- Highlight text to be linked<\/li>\n
- Click the Link<\/strong> tool or press Control <\/strong>(Command<\/strong> on macOS) and k
\n<\/strong><\/li>\n- Paste URL in URL<\/strong> field and select\u00a0Ok.
\n<\/strong><\/li>\n<\/ol>\n<\/a>Text Formatting<\/h2>\n
Highlight font and use Paragraph Format<\/strong> menu add headings<\/a>.<\/p>\n
<\/p>\n<\/a>Alternative Text<\/h2>\n
When adding an Image, enter a description in the Alternative text<\/strong> field. Or, check\u00a0Decorative only<\/strong> for decorative images.<\/p>\n
\nWhen using the\u00a0Collage\u00a0element, select\u00a0i\u00a0<\/strong>(Image settings<\/strong>) and enter alternative text.<\/p>\n
\nThe 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.<\/p>\nLearn more about alternative text<\/a>.<\/p>\n
<\/a>Closed Captions<\/h2>\n
To add closed captions to a Video (included in Interactive Book, Column, or Course Presentation):<\/p>\n
- \n
- Expand the Accessibility<\/strong> accordion.<\/li>\n
- Type the language of the captions in Track label.<\/strong><\/li>\n
- Change Type<\/strong> to\u00a0Captions.<\/strong><\/li>\n
- Click\u00a0Add<\/strong> and upload a WebVTT file.<\/li>\n<\/ol>\n
To add captions to an Interactive Video<\/a>:<\/p>\n
- \n
- Expand the\u00a0Text tracks<\/strong> accordion.<\/li>\n
- Type language of captions in\u00a0Track label.<\/strong><\/li>\n
- Expand\u00a0Subtitles<\/strong> accordion.<\/li>\n
- Select\u00a0Add<\/strong> to upload a WebVTT file.<\/li>\n<\/ol>\n
Use happyscribe caption converter<\/a> to convert .SRT caption type to .VTT file.<\/p>\n
Learn more about closed captions<\/a>.<\/p>\n
To use other platforms to generate captions:<\/p>\n
\n - Type language of captions in\u00a0Track label.<\/strong><\/li>\n
- Type the language of the captions in Track label.<\/strong><\/li>\n
- Paste URL in URL<\/strong> field and select\u00a0Ok.
- Text Formatting<\/a><\/li>\n
- Type language of captions in\u00a0Track label.<\/strong><\/li>\r\n \t
- Type the language of the captions in Track label.<\/strong><\/li>\r\n \t
- Paste URL in URL<\/strong> field and select\u00a0Ok.\r\n<\/strong>
- Text Formatting<\/a><\/li>\r\n \t