Use Accessible Images on Your Site

Using images to present information and add visual dynamics to your community engagement site is a great way to create an inviting environment for your stakeholders. However, you must use images correctly and with accessibility in mind.

All images used online must have alternative text unless they are decorative. Screen readers use alt text to convey the information or function of images. This article outlines the different purposes for images, where to use them in EngagementHQ, and accessibility best practices when applying alt text.

There are several primary purposes for images in EngagementHQ:

Informative images graphically represent concepts and information, such as pictures, photos, and illustrations. Using these images requires an alt text description of the essential information in the image.

You typically use informative images in the photo gallery widget and as part of a project description. Alt text for informative images should concisely describe the following:

Below is an example of an informative image that would require an alt text description to convey the emotion in the picture. For example, "a woman jumping joyfully with a sunset background."

The purpose of Decorative images is to add visual decoration to a page rather than provide information vital to understanding that page. Typically, these images include icons and featured images in project lists on the homepage.

These images provide visual decoration alongside adjacent text information. Images used in these locations should not contain images of text and should have an empty alt text attribute. This ensures that only the information relevant to the user is read aloud when a screen reader scans the page.

Below is an example of decorative images used in Appearance Editor sections.

A Functional image serves a direct purpose and action, such as social media icons, the register banner widget, or a linked logo. The alt text for these images should describe what that image does.

Alternative text for functional images that EngagementHQ provides, such as social share icons, already has the correct descriptions. However, if users add their own images with a practical purpose, an alternative text description for that function will need to be provided.

Generally, you should avoid it, but sometimes, images contain readable text. Actual text is far more accessible than images with text, and you should communicate information this way. If you must use an image containing text, you should provide alt text of the same content.

You should use banners and other images throughout EngagementHQ for informative or decorative purposes and not display images of text. Below is an image showing two options for presenting a banner image using EngagementHQ. The top image with the adjacent text and description utilizing the image as a decorative image is the correct way to show the banner. In the second option, you can see how the text is included in the image. The text in this image can't be read using a screen reader or indexed by search.

You may need to use Complex images to communicate intricate information, such as graphs, flow charts, infographics, diagrams, illustrations, and maps.

To be accessible, images containing large amounts of detailed information like these examples will require a two-part text alternative:

Content authors often overlook long descriptions, but they are critical to ensure all participants who visit your site can engage with the content and information in an accessible way.

Below is an example of a complex image needing significant supporting textual description to convey the information to participants using screen readers. You should only use complex images on a project or static page on EngagementHQ.

For more information on using alternative text with different types of images, we recommend Web Accessibility Tutorials from the Web Accessibility Initiative.