Accessible images

Options for making your images accessible including alt text, long descriptions and considerations for screen readers.

What are accessible images?

Images are often an essential part of your learning materials and enhance the learning experience of many students. But unfortunately, images are inherently inaccessible to students with visual impairments. They can also be highly distracting for some students with specific cognitive disorders.

Image descriptions

The key consideration for making images accessible is providing image descriptions. There are two common types of image descriptions.

Alt text

Alt text is a system tag or attribute that is read by a screen reader in place of the image. To view the alt text, you need to use the alt text functionality in the system or app your content is in, e.g. Word or an LMS course site page. Alt text should be short, usually no more than 120-150 characters, and only describe relevant aspects of the image. All images that are not decorative should have an alt text.

Long description

For simple images, alt text is usually sufficient. However, for more complex images such as graphs, maps, charts, data tables, provide a long description as well as the alt text that says what it is and where the long description is located on your page. The long description is usually located in the content with the image but can also be a link that takes the student to another LMS course site page or section of the content. Long descriptions are visible to all students, not just those using a screen reader.

Using images

When thinking about using images, consider these questions:

What is the purpose of the image?

Is the image necessary for understanding content?

Is the necessary image simple or complex?

The accessibility focused actions you take will depend on your answers to these questions.

If the image has no purpose or relationship to the surrounding text – don’t use the image

If you want to use the image to provide some visual interest and focus for students but it is not necessary for understanding content – mark it as decorative

If the image is simple and necessary for understanding content – provide alt text that describes relevant image features

If the image is complex and necessary for understanding content and complex – provide alt text and a long description that describe relevant image features

If the image is functional, i.e. clicking on the image performs a function such as taking students to another LMS course site page – provide alt text that describes the function not the image

WCAG examples

The WCAG Decorative Images page (external site) provides some examples of the types of images that should be set as decorative. Don’t worry about the code information – just read the explanations about why each example is decorative.

If you would like to look at a slightly more complex image tagging decision process, look at the WCAG alt decision tree (external site).

Images and screen readers

Here are some things to be aware of for students using screen readers:

If an image is set as decorative, screen readers will ignore the image.

If an image has no tag, i.e. is not set as decorative and does not have an alt text, some screen readers will read out the image file name or the URL if a link – note that the LMS will not allow an image to be untagged but applications like Word and PowerPoint will.

If an image is actually decorative but alt text is provided, often autogenerated by the application, e.g. Word, you are subjecting your student with unnecessary “audible clutter”.

Describing images

If you have decided to include an image in your content and it is not decorative, you will need to provide an alt text and, depending on the image complexity, a long description.

The most important thing to remember about describing images is the context.

The description must reflect the context within which you are using the image. This means that you could describe the same image quite differently depending on the different purposes of the image within the learning content.

The description should also only describe observable aspects of the image, not assumed aspects.

Example

Let’s explore an example. Here is a long description of an image:

A photograph of four young adult students seated around a rectangular table. At one narrow end of the table is a person of colour, they have afro-textured hair, are using a laptop, have headphones around their neck and are seated in a wheelchair. Seated to their right is a light-skinned person with dark hair. They have an open notebook and are holding a pen. Next to that student is a person with olive toned skin, black hair, and an arm tattoo. They also have an open notebook and are holding a pen. To the left of the student at the end of the table and opposite the other two students, is another student who is looking across the table. They have black hair tied in a ponytail. Their face is not visible. There are three coffee cups, some headphones and a pair of glasses on the table.

If you can see images, here is the image related to the long description.

The alt text for the image as it is shown here is:

“Students working together around a table.”

However, if the context that the image was being used in was students with disabilities, the alt text provided would not be very meaningful. Instead, we could use:

“Four students working together around a table, one of whom is seated in a wheelchair.”

What about if the context was gender identity, or persons of colour, or the value of group work, or the relative efficacy of digital and analogue notetaking methods, or does coffee help students focus? What alt text would be appropriate in any of those scenarios? And should the long description also be changed?

Using images within text

If you are using an image within a block of text in Word, make sure you wrap the image in-line with the text. If you have the image floating, screen readers may ignore the image alt text.

In this collection