About Images and Graphics
Use images and graphics to support course content, demonstrate ideas and concepts, and share information.
There are two types of images and graphics:
- Low complexity
- High complexity
These categories describe how intricate or elaborate the images and graphics are.
Low Complexity Images and Graphics
The following are attributes of low complexity images and graphics:
- Informative: Describe ideas, concepts, or information as pictures or illustrations.
- Decorative: Provide supplemental visuals for aesthetic purposes (such as icons).
- Functional: Demonstrate the ability to perform a function (such as a question mark icon that displays help documentation when selected).
- Text-based: Visual representations of text that aim to engage and entice learners.
High Complexity Images and Graphics
The following are examples of high complexity images and graphics:
- Graphs: Give detailed information in a graphical form (like a pie chart, bar chart, line graph, and scatter plot)
- Diagrams: Communicate process flows, relationships, and comparisons of information (like tree diagrams, flowcharts, Venn diagrams, UML diagrams)
- Groups of images: Convey meaning through a collection of images (like a collage).
- Image maps: Communicate information through clickable and interactive areas on an image.
Create Accessible Images
Accessible images use text alternatives to describe their function and purpose: this is called alternative or alt-text. An image's alternative text is highly dependent on the image type. Before you write an image's alternative text, consider its context within the course and then author a description that accurately reflects its function, purpose, and context.
In general, low complexity graphics require fewer words and shorter descriptions, whereas high complexity graphics require complete explanations or text equivalents of the data and information.
Use the following table as a reference for authoring alternative text:
|
Image Type |
Alternative Text Strategy |
| Informative | A short description that communicates the basic and necessary information about the image. |
|
Decorative |
No description should be added. Note: In learning management systems, when you add an image, there is typically a “Decorative” setting. |
|
Functional |
A short description of the function (rather than the image). |
|
Text-based |
A short description of the text. If the image is an actual image of text, use the same words as in the image. |
|
Graphs |
A complete description of the data or information. The information conveyed in the alternative text should be equivalent to the data in the graph. |
|
Diagrams |
A complete description of the data or information. The information conveyed in the alternative text should be equivalent to the data in the diagram. |
|
Groups of images |
A description that conveys meaning for all the images in the group. |
|
Image maps |
A description of the entire image map. Items that can be selected should have their own description as well. |
Resources
Use the W3C Web Accessibility Initiative alt decision tree to determine how to apply alternative text for various scenarios.
References
Images Concepts. WAI Web Accessibility Tutorials. (2014, September). https://www.w3.org/WAI/tutorials/images/.
