Accessible images and diagrams

IMAGES AND DIAGRAMS (Non-text content)

Images and diagrams help to enhance your student’s comprehension of a topic more effectively than just text alone. However students who cannot distinguish images depend on the content being transcribed into an alternative format. The purpose and complexity of an image will determine the best alternative to apply to an image. Here’s some ways you can improve the accessibility of your images.

Tips

Give all of your images a text alternative. Alternative text communicates the idea of an image and is different to a caption.
Animations in your subjects should be user controlled or very short in duration.
Ensure icons are well designed, easy to understand and are used consistently.
Do not use an image of text if the same visual effect can be made using text alone. True text is easily enlarged without becoming pixelated or degraded in quality.
Flashing images must flash more than three times per second, be sufficiently large, and bright or significant contrast between the flashes.
Functional images provide content and often navigation. Use succinct alternative text in your materials.
Form image buttons, such as Next Page, must have an alternative text that describes the function of the button.
Do not use instructions that rely on things that can only be seen. For example, shape, size, screen location, orientation or colour.
Provide descriptive identification for audio or video content.

an image demonstrating accessible versus non accessible text — Which option above do you think is more accessible – the image based on text, or the actual text?

Techniques for Alternative Text

When determining the best alternative text to use for an image in your subjects, think of the context of the image in the document and categorize from the following statements:

The image conveys simple information (e.g. a photograph, icon, or logo)
The image conveys complex information (e.g. a chart or graph)
The image is purely decorative, not informative

Simple Images

The most common method is to supplement an image with an alternate text (alt text) attribute. Alt text is beneficial in communicating the content of an image for students who cannot see it clearly. The description should be succinct and communicate the idea of the image as if you were explaining the image to someone. Don’t repeat the caption in the alt text.

Screen reader software is able to read out aloud the alt text when the image is encountered. The image description is read first and then the alt text. Common authoring tools and Microsoft Office programs have the ability to add alt text to images and this is another quick and easy way to enhance accessibility in your learning resources. Check out the two lists below for practical examples.

How to Add Alternate Text in MS Office Programs

How to add Alt Text to an Image:

Right click on the image
Select Format Picture
Click on Layout and Properties icon in Format Picture menu
Click on Alt Text item
Add a Title
Add a verbal description
Save the file.

Example of detailed image (below)

This is a demonstration of a simple image, it is an image of a labelled ribcase — Here, the image has relatively few text details and few other competing images or graphics

This image shows an example of a detailed graphic including a range of text types and different diagrams — Note how there is a significant amount of competing detail in this image, including graphics, text of several varieties and complex diagrams

Example of simple image (above)

See here for detail about how to add alternate text to images in Blackboard

Complex Images

Complex images, such as graphs, charts, or complex diagrams, may contain too much information to be effectively described using alt text. When a complex image cannot be limited to a succinct alt text attribute (more than a few sentences), then you should provide an alternative text that provides the same information – ideally in proximity to the original diagram. The alternative text for the image should still describe the general context of the image. Ask yourself the question, what information is this image intended to communicate? A long description can include any structure necessary to communicate the content of the image, including headings, lists and data tables.

You can locate the alternative text:

In text adjacent to the image
Within the page containing the image, such as an adjacent data table
By linking to a separate web page that provides a longer description. The link can be adjacent to the image or the image itself could be linked to the page

Refer to examples of complex images at the DIAGRAM Centre http://diagramcenter.org/making-images-accessible.html

Decorative Images

Images that are purely decorative or make a document visually appealing and contain no informative content, do not need a description. However, they still require specific markup so screen reader programs know to skip them. There are methods for hiding decorative images from screen reader programs, such as the null alt text attribute (alt text “ “)

Refer to examples at WebAIM https://webaim.org/techniques/alttext/

Resources

https://webaim.org/techniques/images/

https://www.washington.edu/doit/programs/accessdl

http://diagramcenter.org/table-of-contents-2.html