Last updated July 20, 2021
How to choose and describe images, use alt text, produce accessible graphs, diagrams and infographics, and copyright rules.
Choosing the right image
When using photos, logos or icons, use simple images that can be explained easily with text.
The image chosen should be related to the content that’s on the page, to help the user further understand the information on the page.
Describe your images
Images must be described with words for people who cannot see them.
This task can be completed a couple of ways:
This is an accordion element with a series of buttons that open and close related content panels.
Alt text
Alt text is copy that a person using assistive technology needs to be able to understand what the image is communicating.
Crafting useful alternative (alt) text for images is both art and science. Use the guidance on how to write effective alt text. In summary:
- Be brief, one sentence.
- Describe the image in relation to the story.
- Don’t be redundant/provide the same information as text within the context of the image.
Don’t use the phrases “image of …” or “graphic of …” to describe the image. It’s redundant.
Description in your copy
Describe what’s happening in the image in the body text and leave the alt text empty. This means the description is available to everyone.
Captions
A caption is optional. You can use a caption to:
- label a graph, infographic or diagram
- name a person in a photo
Do not use the caption to describe your image instead of putting it in the body text – some screen reading software does not read captions when the alt text is empty.
If you do not need a caption, do not include one.
Data visualizations: graphs, diagrams and infographics
These are all examples of complex images, or visualizations that contain more information than can be easily explained. Review the best practices on making complex images more accessible.
This is an accordion element with a series of buttons that open and close related content panels.
Graphs and charts
Simplify data as much as possible.
When publishing graphs showing complex information, make sure they provide an alternative way to explain something which is also written in text. For example, you could describe the trends in body text and have a table showing the most important data points. You can also link to the raw data as an attachment, or provide a way for users to request it.
Do not rely on color alone to convey information. Ensure there is a high enough color contrast ratio between segments, lines, text and background color. You can use a color contrast checker.
Diagrams
Sometimes it’s useful to use a diagram to visually convey a concept.
Work out whether you need a diagram
Before deciding to use a diagram, you need to work out whether what you’re trying to convey is best done with text, or a diagram supported by text.
If you can convey the information in a clear and succinct way with text then you probably do not need a diagram. If a diagram helps you to make a subject clearer, or summarize a large amount of information, it’s helpful to include one.
Consider whether you can reduce the complexity of the thing you’re trying to convey, and work with a content designer to make sure the text is clear.
Make sure the diagram is accessible
Use a color contrast checker, but do not to rely on color alone to convey meaning.
Include a detailed explanation of the processes and relationships explained in the diagram in the body text. This is helpful for users who cannot see the diagram.
Infographics
An infographic is an image which usually displays data, graphs, charts or text to explain a complex process or overview of a subject.
Infographics can be hard to make accessible if they’re too complicated. This is because screen magnifiers may need to scroll horizontally and vertically across the image. This may make them hard to understand when not seen all at once. The image may also become blurred and pixelated when magnified.
Explain the process or topic with text before you consider creating an infographic.
If the infographic contains text, also provide the text in the body copy.
Do not use color alone to show differences.
Deeper learning on accessible data visualizations
Places to find images
UW Madison has several photo collections with caption context and credits, that are available to campus units.
If photos are sourced from other paid or free photo services, images should always comply with copyright laws and fair use.