Pima Tech Guides

H5P: Guidelines for Creating Alt Text

Updated on

If you use images in any of your H5P content, you will need to add alternative (alt) text for accessibility reasons. Please see the guidelines below to aid in creating alt text.

  • Image alt text should include any information the image portrays that is important to understand the function of the image.
  • Keep alt text as simple as possible while still providing enough information for a user to navigate your content.
  • If your image shows how to complete a step, please include directional alt text. This alt text includes information on how to find buttons, drop-down menus, or what option in a list of text that are shown in the image. Example: Select Tools the sixth option in the D2L navbar and then Assignments, the fourth option in the drop-down menu.
  • You do not need to include the word "image" at the beginning of your alt text as a screen reader will already provide that information.

Example

The following flashcard uses an image of a Ferris wheel to ask the question, "What color scheme does this image of a Ferris wheel show?" Because the color of the image plays a vital role in completing the task, the alt text must include sufficient information about the colors.

The alt text should read similar to: White Ferris wheel with red, orange, yellow, and seafoam green carriages against a white/light blue sky

Image showing an example H5P flashcard.

Ferris wheel image used from Unsplash by hannahmorgan7

0 Comments

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Guide H5P: Creating Interactive Content Using ChatGPT
Next Guide H5P: Determining the Accessibility of H5P Content Types
Want Help From A Human? → Contact Us