Using images to present information and add visual dynamics to your community engagement portal is a great way to create an engaging environment for your stakeholders, however, it's essential that images are used correctly and with accessibility in mind.
All images used online must have text alternatives that convey the information or function represented by the images in order for them to be accessible. In this article, we outline the different purposes for using images, where they are typically used in EngagementHQ and accessibility best-practices for applying text alternatives.
Image Purposes
There are several main purposes for using images with EngagementHQ.
Images that graphically represent concepts and information such as pictures, photos and illustrations. The use of these image types requires an alternative text description conveying the essential information in the image. These types of images are typically found in the photo gallery widget and also as part of a project description. Alternative text for informative images should be used to; describe how the information in the image supplements other surrounding information; describe the succinct information portrayed in the image; describes the conveyed impression or emotion in the image and; how an image conveys a file format. Below is an example of an informative image that would require an alternative text description to convey the emotion in the image.
The purpose of these images is to add visual decoration to the page, rather than to convey information that is important to understand that page. These types of images are typically used on the appearance editor of EngagementHQ including the project showcase images. They are typically referred to as the featured images. The purpose of these images is to provide visual decoration alongside adjacent text information such as the project title and description fields on homepage cards. Images used in these locations should not contain images of text or have alternative text labels which repeat the adjacent text information. This is to ensure that when a screen reader scans the page the main information relevant to the user is conveyed in the adjacent pre-defined text fields and that screen readers are not congested with repeated and redundant information. Below is an example of decorative images which are used across EngagementHQ's appearance editor sections.
The images serve a function and the text alternative should describe what the function does. These are typically images such as social share icons and the register banner widget. Alternative text for functional images which EngagementHQ provides out of the box such as social share icons has already got the correct functional descriptions. However, if users add their own images which they intend to have a functional purpose, an alternative text description for that function will need to be provided.
Sometimes readable text is presented within images. This should be avoided unless the image is a logo. Banners and other images used throughout EngagementHQ should be used for either informative or decorative purposes and not contain images of text. Actual text is far more accessible than images of text and it is preferred that information should be communicated in this way. Below is an image showing two options for presenting a banner image using EngagementHQ. The top image with the adjacent text and description utilising the image as a decorative image is the correct way to present the banner. In the second option, you can see how the text is included in the image. This makes the text not screen readable, search indexable and does not provide the best method for communicating the purpose of the page.
Sometimes online engagement might drive us to create complex images with substantial information being conveyed. These can include diagrams, flow charts, infographics, illustrations and maps. In order to be accessible, images containing large amounts of detailed information like these examples will require a two-part text alternative. This includes both an alternative text description to identify the image and also a textual description of all the information being conveyed in the image. This is often overlooked, but it is critical to ensure all participants who visit your site are able to engage with the content and information being provided in an accessible way. Below is an example of a complex image which would need significant supporting textual description in order to convey the information to un-sighted participants. These images should only be used on a project or static page on EngagementHQ and not inserted into the appearance editor.
For more information on using alternative text with different types of images, we recommend Web Accessibility Tutorials from the Web Accessibility Initiative.